Question

所以我有一个div，允许我显示当前页面URL的QR码：

%defines weight vector. for example: a1=1, a2=2, a3=3, a4=4,a5=5 
A = 1:5;
%defines a range vector
ranges = [0:(1/length(A)):1,inf];

%The padding is for handling cases where t<0 or t>=1
APadded = [0,A,0]; 
fTemp=@(t)APadded(find(t < ranges,1,'first'));
f=@(t)arrayfun(fTemp,t);

并使用如下：

.page-qr:before {
  content: url(https://chart.googleapis.com/chart?cht=qr&chs=100x100&chl=<?php echo current_page(); ?>?choe=UTF-8);
  height: 100px;
  width: 100px;
}

显然，为了即时获取当前的URL，我必须将这个CSS样式放在我页面的<div class="page-qr"> </div>中。我试图将其移动到样式表。

我有想使用数据属性来指定URL：

<head>

所以，我的问题是，是否可以在样式表中加倍使用<div class="page-qr" data-url="https://chart.googleapis.com/chart?cht=qr&chs=100x100&chl=<?php echo current_page(); ?>?choe=UTF-8"> </div>和content:url()？

attr(data-url)

Answer 1

这是css-values-3中attr()的建议功能。 CSS看起来像这样：

.page-qr:before {
  content: attr(data-url url);
  height: 100px;
  width: 100px;
}

不幸的是there are no known implementations，所以这仍然是不可能的。

Answer 2

我刚刚偶然发现了同样的问题，但找到了使用自定义属性的解决方案。所以我们可以将任何允许作为自定义属性值的类型传递给它。然后你可以绝对定位它，如果这是你要找的。

你可以这样使用它：

HTML

<div style="--img-url: url('${imgUrl}')"></div>

CSS

div {
  position: relative;
}

div::before {
  position: absolute;
  top:0;
  left:0;
  width:100px;
  height:100px; 
  content: var(--img-url); 
}

See this post for further info

CSS：使用数据属性作为内容URL

2 个答案: