Настройка кода CSS

Question

Я разработчик приложений для iPhone и очень мало знаю о css. У меня есть код для создания ячеек. Здесь это:

<style type="text/css" media="screen">

      body {
        margin: 0;
        width: 320px;
        height: 200px;
      }

      .ad-carousel-view .cells > li {
        width: 200px;
        height: 70px;
        padding-top: 16px;
        padding-left: 20px;
        color: white;
        font-size: 20px;
        font-family: "Helvetica Neue", Helvetica;
        -webkit-border-radius: 10px;
        -webkit-box-sizing: border-box;
        background-image:url('13.jpg');
      }

      .ad-carousel-view .cells > li:nth-child(odd) {
        background-color: rgb(255,59,59);

      }

      .ad-carousel-view .cells > li:nth-child(even) {
        background-color: rgb(80,80,80);
        background-image:url('13.jpg');
      }

      .ad-carousel-view .cells > li.active {
        background-color: red;
        background-image:url('23.jpg');
      }

    </style>
    <style type="text/css">

    .wrap{
    border:solid 1px #000000;
    width:320px;
    height:150px;
    position:relative;
    top:0px;
    left:0px;
    }

    </style>

вКод выше, следующий раздел используется для установки цвета и изображения BG ячейки

//odd cell
    .ad-carousel-view .cells > li:nth-child(odd) {
            background-color: rgb(255,59,59);

          }
    //even cell
          .ad-carousel-view .cells > li:nth-child(even) {
            background-color: rgb(80,80,80);
            background-image:url('13.jpg');
          }
    //highlighted cell
          .ad-carousel-view .cells > li.active {
            background-color: red;
            background-image:url('23.jpg');
          }

. Теперь мне нужно динамически изменить изображение BG ... я имею в виду вместо использования

background-image:url('23.jpg');

я хочу использовать переменную что-то вроде

background-image:url(var);

это возможно в CSS ?? .... если нет, то тогда у кого-нибудь может быть идея динамически установить имя изображения ??

Answer 1

Это невозможно в чистом CSS. Вы можете использовать Javascript для установки свойства background-image при загрузке:

jQuery пример:

$(document).ready(function(){

    $('.ad-carousel-view .cells > li.active').each(function(){
        var img = getYourImagePath();
        $(this).css({backgroundImage: img});
    });
});

Answer 2

Вы можете сделать это в своем HTML, если вы используете серверную технологию, используя встроенный стиль, поэтому в вашем элементе у вас будет что-то вроде:

<li class="active" style="background-image:url(###);"></li>

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

Вы также можете установить его с помощью javascript, если у вас нет серверной технологии для работы с:

var obj= document.getElementById('aUniqueId');
obj.style.backgroundImage = yourImage;

jQuery похож, но немного приятнее, потому что он может выбрать класс вместо просто ID - что было бы лучше, если вы хотите применить более одного активного класса на странице:

$(".active").css("backgroundImage",yourImage);

Answer 3

LESS позволяет использовать переменные в CSS:)

Пример:

@brand_color: #4D926F;

#header {
  color: @brand_color;
}

h2 {
  color: @brand_color;
}

Answer 4

Да, это должно быть хорошо. Вы проверяли это? Я уверен, что это работает хорошо.