html - CSS二背景

Question

我为 li 设置了gradient background，并且我还希望为每个 li 使用不同的 img 背景。

我该怎么做？

乌里:

<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

您可以组合 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应用浏览器前缀。