CSS代碼定製

Question

我是一個iPhone應用程序開發者和有關於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> 

在上面

下面的一段代碼被用於設置單元格的背景色和圖像

//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'); 
      } 

現在我需要的是動態改變背景圖片...我的意思，而不是使用

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

如果您使用內聯s使用服務器端技術，則可以在HTML中執行此操作tyle，所以你的元素，你會碰到這樣的：

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

，你將取代###與任何輸出方法您使用的是動態地設置圖像。

你也可以用JavaScript設置，如果你沒有任何服務器端的技術工作：

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

jQuery是相似的，但更好一點，因爲它可以拿起類，而不是隻該ID - 如果你想申請的頁面上有多個活動類，其效果會更好：

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