在css之前/之后使用数据属性作为背景图像

Question

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

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

然后我想data-icon在我的CSS中使用它来显示为基本64背景图像.就像是:

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

有没有办法做到这一点？

Answer 1

这个有可能!

(但不是你怎么想)

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其边界之外,然后将伪元素设置为零,则它将在父项上提供相同的效果,但在psuedo上将显示图像.