CSS兩個背景

我有漸變背景對於li我想也爲每個li不同的img背景。CSS兩個背景

我該怎麼辦？

UL李：

<div id="right_navigation_container"> 
    <ul> 
      <li id='library_one'><a href='#'>library</a></li> 
      <li id='library_two'><a href='#'>library</a></li> 
      <li id='library_three'><a href='#'>library</a></li> 
      <li id='library_four'><a href='#'>library</a></li> 
    </ul> 
</div>

CSS：

#library_one{ 
     background:url("../images/bg_cat_nav_right.png") no-repeat; 
     background-position: 7px 10px; 
    } 
    #library_two{ 
     background:url("../images/bg_cat_nav_right.png") no-repeat; 
     background-position: 7px -28px; 
    } 
    #library_three{ 
     background:url("../images/bg_cat_nav_right.png") no-repeat; 
     background-position: 7px -70px; 
    } 
    #library_four{ 
     background:url("../images/bg_cat_nav_right.png") no-repeat; 
     background-position: 7px -110px; 
    } 


    #right_navigation_container ul li{ 
     padding:10px 0 10px 30px; 
     border:solid 1px #EAE7E1; 
     margin-top:13px; 
     border-radius: 10px; 
     background: -moz-linear-gradient(270deg, #EDEBE8 20%, #EDEBE8 45%, #FCFBFA 100%); 
     background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #EDEBE8), color-stop(45%, #EDEBE8), color-stop(100%, #FCFBFA)); 
     background: -webkit-linear-gradient(270deg, #EDEBE8 20%, #EDEBE8 45%, #FCFBFA 100%); 
     background: -o-linear-gradient(270deg, #EDEBE8 20%, #EDEBE8 45%, #FCFBFA 100%); 
     background: -ms-linear-gradient(270deg, #EDEBE8 20%, #EDEBE8 45%, #FCFBFA 100%); 
     background: linear-gradient(180deg, #EDEBE8 20%, #EDEBE8 45%, #FCFBFA 100%); 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EDEBE8', endColorstr='#FCFBFA',GradientType=0); 
    }

JSFIDDLE

來源

2014-06-07 PiraTa

你是什麼意思有一個元素的兩個背景？ – M98

也許'元素：nth-child（）'？ –

@Kermani 我想要這個漸變，也想img – PiraTa

您可以結合background-image和gradient性能如下面以具有施加在每一個背景圖像和梯度li

#library_one { 
    background:url("http://oi61.tinypic.com/5trnmh.jpg") 7px 10px no-repeat, linear-gradient(180deg, #EDEBE8 20%, #EDEBE8 45%, #FCFBFA 100%); 
}

FIDDLE

請照常使用瀏覽器前綴linear-gradient。

來源

2014-06-07 16:00:58

您可以有兩個辦法做到這一點：

1 addning貴麗在一個div並設置不透明度或透明度。 Other Answer

Example

<li id='library_four'> 
     <div id="gradientImage"> 
       <a href='#'>library</a> 
     </div> 
</li>

2- addnig背景色和背景圖像爲它

來源

2014-06-07 15:41:24 M98

回答

相關問題