如何使用：before设置图像，并使用css设置data属性

Question

我只想将图像背景设置为：before，因为我会在顶部放置一些内容

以前我以前曾使用data属性动态地设置过它。

这是我正在尝试的内容：

  <li data-image="https://via.placeholder.com/150/0000FF">hello 1</li>
  background: url(attr(data-image));

以下为完整代码：

       setInterval(function(){
            var randomImages = ['https://via.placeholder.com/150/0000FF','https://via.placeholder.com/150/FF0000','https://via.placeholder.com/150/FFFF00'];
            var imagIndex = Math.floor(Math.random() * 3);
           $('li:eq('+imagIndex+')').attr('data-image',randomImages[imagIndex]);
         // console.log(randomImages[imagIndex]);
},200);

       ul{
            list-style: none;
            line-height: 43px;
        }

        li{position: relative;}

        li:before{
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 40px;
            background: url(attr(data-image));
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<div id="container">
        <ul>
            <li>hello 1</li>
            <li>hello 2</li>
            <li>hello 3</li>
        </ul>
   </div>

Answer 1

尽管许多开发人员强烈要求这样做，但目前您不能使用URL属性。

一种替代方法是使用CSS自定义属性：

<li style="--image: https://via.placeholder.com/150/0000FF;">hello 1</li>

  /* your code … */
  li:before {
    background: url(var(--image));
  }

浏览器支持很好，但是您可能需要权衡此选项，而不是简单地内联background-image属性并在元素本身上使用隐藏的背景技巧：

<li style="background-image: url(https://via.placeholder.com/150/0000FF);">hello 1</li>

  /* your code … */
  li { background-size: 0 0; }
  li:before {
    background-image: inherit;
  }