html - 在背景图像之前/之后使用 css 中的数据属性

Question

所以我有如下所示的 HTML 标记:

<a href="#" data-icon="data:image/png;base64,iVKAInsdal...">Some link</a>

然后我想在我的 CSS 中使用那个 data-icon 来显示为 base 64 背景图像。像这样的东西:

a:before {
    content: "";
    width: 16px;
    height: 16px;
    padding-left: 16px;
    background: url(attr(data-icon)); // this doesn't work
}

有什么办法吗？

Answer 1

This IS possible!

(但不是你想象的那样)

a{
    background-image:url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRrlZZQ3MwNcconkIeLX3_nS_IV81gJ8rincQsipqXGsiBkPmCX);
    background-repeat:no-repeat;
    background-position:1000px 1000px;
}

a:before {
    content: '';
    width: 16px;
    height: 16px;
    padding-left: 16px;
    background-image: inherit;
    background-position:0px 0px;
}

很遗憾，您尝试执行的操作将不起作用，attr 仅适用于 content 属性。

唯一可能的选择是给父元素一个背景图片，然后将伪元素上的background-image设置为inherit。如果将父元素 background-position 设置在其边界之外，则伪元素为零，它会产生相同的效果，即父元素上没有图像，但伪元素上有图像。