在css之前/之后使用数据属性作为背景图片 [英] Using data attributes in css before/after for a background image

问题描述

 < a href =＃data-icon = data：image / png; base64，iVKAInsdal ...>一些链接< / a> 
  

然后我想用数据图标在我的CSS中显示为基础64背景图像。例如：

  a：before {
 content：; 
 width：16px; 
 height：16px; 
 padding-left：16px; 
 background：url（attr（data-icon））; //这不起作用
} 
  

有没有办法做到这一点？

解决方案

这是可能的！ / a>

（但不是您可能会怎么想）

  {
 background-image：url（https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRrlZZQ3MwNcconkIeLX3_nS_IV81gJ8rincQsipqXGsiBkPmCX）; 
背景重复：不重复; 
 background-position：1000px 1000px; 
} 
 
 a：之前{
 content：''; 
 width：16px; 
 height：16px; 
 padding-left：16px; 
 background-image：inherit; 
 background-position：0px 0px; 
} 
  

不幸的是，您试图执行的操作不起作用， attr 仅适用于内容属性。

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

So I have HTML markup that looks like this:

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

Then I want to use that data-icon in my CSS to display as the base 64 background image. Something like:

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

Is there any way to do this?

解决方案

This IS possible!

(but not how you may think)

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

Unfortunately what you are attempting to do will not work, attr is only applicable to the content property.

The only possible alternative would be to give the parent a background image, then set background-image on the pseudo element to inherit. If you set the parent elements background-position outside its boundaries then the psuedo elements to zero, it will give the same effect of no image on the parent, but an image on the psuedo.

这篇关于在css之前/之后使用数据属性作为背景图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！