Question

我有一个菜单，包含在<ul>中，我希望<li>的背景变得更暗，li所在的列表中的下方。它是固定数量的li s。

我想给它一个background: rgba(0,0,0,x);，其中x将分为5步从0.1到0.6（所以.1每步都会变暗。）

当然我可以手动定位每个li并相应地更改背景颜色，但我想知道是否有任何方法可以用纯CSS做到这一点。我知道可以用jQuery做，但我想知道CSS中是否有一个可以做到这一点的功能，而我却没有意识到它。

Answer 1

由于已知li的数量，您可以在线性渐变上使用基于％的颜色停止，如@Megajin所述

＆＃13;

ul {
    margin: 0;
    padding: 0;
    width:50%;
    border:1px solid grey;
    background: linear-gradient(
        to bottom,
        rgba(255, 0, 0, 0.1) 0%, 
        rgba(255, 0, 0, 0.1) 20%, 
        rgba(255, 0, 0, 0.2) 20%, 
        rgba(255, 0, 0, 0.2) 40%, 
        rgba(255, 0, 0, 0.3) 40%, 
        rgba(255, 0, 0, 0.3) 60%, 
        rgba(255, 0, 0, 0.4) 60%, 
        rgba(255, 0, 0, 0.4) 80%, 
        rgba(255, 0, 0, 0.5) 80%,
        rgba(255, 0, 0, 0.5) 100%);
}
li {
    display: block;
    height: 50px;
    list-style-type: none;
    border-bottom:1px solid grey;
}

＆＃13;

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

＆＃13;

Answer 2

我不推荐JS做造型，但如果你很懒，你可能会做点什么：

var menuDarkness = 1;
$(document).ready(function(){
$("ul li").each(function(){
   $(this).css({background: "rgba(0,0,0,0."+ (menuDarkness++) +")"});
});
});

然而，使用第n个孩子可能是最干净的解决方案：

ul li:nth-child(1) { background: rgba(0,0,0,0.1);)
ul li:nth-child(2) { background: rgba(0,0,0,0.2);)
...

请注意，以不同的顺序添加它们会产生不同的效果，因为nth-child选择每一行或第二行。因此定义最后一个将导致所有这些颜色具有相同的颜色。

Answer 3

最简单的方法是使用CSS3渐变。你不必做太多的事情来定义背景，看看魔法为你做的所有工作：

#yourUl{
background: -webkit-linear-gradient(yourColor, yourDarkerColor); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(yourColor, yourDarkerColor); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(yourColor, yourDarkerColor); /* For Firefox 3.6 to 15 */
background: linear-gradient(yourColor, yourDarkerColor); /* Standard syntax (must be last) */
}

背景颜色逐步变暗

3 个答案: