Question

li我有渐变背景，我想为每个li提供不同的img背景。

我该怎么做？

ul li：

<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

Answer 1

您可以通过两种方式执行此操作：

在div中添加你的li并为其设置不透明度或透明度。 Other Answer

Example

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

为其添加背景颜色和背景图像

Answer 2

您可以合并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。

应用浏览器前缀

CSS两个背景

2 个答案: