Как установить изображение с: before и атрибут data с css

Question

Я хочу установить фоновое изображение с: before только потому, что поверх него я помещу некоторый контент

, ранее я динамически использовал атрибут данных, чтобы установить его до.

Вопрос : как я меняю число с :before то же самое, что я ожидаю для изображения

вот что я пытаюсь:

  <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]);
      $('#displayingWithBefore').attr('data-number',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));
        }

   #displayingWithBefore{
        position: relative;
        width: 90px;
        height: 90px;
        background:red;
        color: #fff;
    }

#displayingWithBefore:before {
    content: attr(data-number);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    font-size: 30px;
    text-align: center;
    line-height: 92px;
}

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



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

Тем не менее я ожидаю хорошего ответа

Пожалуйста, помогите мне заранее спасибо !!!

Answer 1

Хотя многие разработчики настаивают на этом, в настоящее время вы не можете использовать атрибуты для URL.

Альтернативой является использование CSS пользовательских свойств:

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

  /* your code … */
  li:before {
    background: 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;
  }

Answer 2

Если я правильно понял, и исходя из того, как вы рандомизируете атрибут data-image каждые 200 мс, это означает, что вы хотите случайный фон каждые 200 мс. Если это так, просто добавьте стиль к заголовку, используя jQuery.

Если не просто установить data-image один раз, и добавьте стиль к заголовку.

Здесь, в моем примере, я следовал вашему коду , который генерирует случайный фон каждые 200 мс.

Я надеюсь, что это имеет смысл.

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]);
         $('head').append('<style>li:before{background: url("'+randomImages[imagIndex]+'");}</style>');
},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)); You don't need this--> 
        }

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