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

【问题标题】：CSS: Using data attribute as content URLCSS：使用数据属性作为内容 URL
【发布时间】：2016-09-18 16:59:12
【问题描述】：

所以我有一个 div 可以让我显示当前页面 URL 的二维码：

.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;
}

并像这样使用：

<div class="page-qr"> </div>

显然，要即时获取当前 URL，我必须将此 CSS 样式放在我页面的 <head> 中。我正在尝试将其移至样式表。

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

<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) 的使用加倍？

.page-qr:before {
  content: url(attr(data-url)); /* Doesn't work, but you get the idea */
  height: 100px;
  width: 100px;
}

【问题讨论】：

请注意，此处的高度和宽度属性实际上并不会调整插入图像的大小。见stackoverflow.com/questions/14978807/…
@BoltClock：谢谢，更新了。

标签： css css-content

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

你可以这样使用它：

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

【讨论】：