CSS код настройки

Question

Я iPhone App Developer и имеют очень мало знаний о css.I есть код, чтобы создать не из cells.here этого является:

<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

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

Answer 3

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

Пример:

@brand_color: #4D926F; 

#header { 
    color: @brand_color; 
} 

h2 { 
    color: @brand_color; 
} 

Answer 4

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

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

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

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

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

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

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