0

如果有人问过这个问题，请提前道歉：我找不到它，但我不太确定我使用的关键字。

无论如何！我正在尝试在图像上放置一条不透明的白色渐变线。这是我试图把它放在上面的东西：

div.horizontal
{
    position: relative;
    width: 100%;
    height:45px;
}

div.horizontal ul
{
    list-style-type:none;
    margin:0;
    padding:0;
} 

div.horizontal li
{
    float:left;
}

div.horizontal a
{
    display:block;
    width:312px;
    height:35px;
    background-image: url("../img/truefactzheader.png");
}

div.horizontal a:link,div.horizontal a:visited
{
    font-weight:bold;
    color:#FFFFFF;
    text-align:center;
    vertical-align:middle;
    padding:4px;
    text-decoration:none;
    text-transform:uppercase;
}

div.horizontal a:hover,div.horizontal a:active
{
    height:45px;
    a:link {text-decoration:none;}
    a:visited {text-decoration:none;}
}

渐变代码是这样的：

background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 51%, rgba(255,255,255,0.15) 52%, rgba(255,255,255,0) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(51%,rgba(255,255,255,0.15)), color-stop(52%,rgba(255,255,255,0.15)), color-stop(100%,rgba(255,255,255,0)));
background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.15) 51%,rgba(255,255,255,0.15) 52%,rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.15) 51%,rgba(255,255,255,0.15) 52%,rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.15) 51%,rgba(255,255,255,0.15) 52%,rgba(255,255,255,0) 100%);
background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.15) 51%,rgba(255,255,255,0.15) 52%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=0 );

我如何让一个胜过另一个？

编辑：

我试过这个：

background: url("../img/truefactzheader.png"), -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0.15) 51%, rgba(255,255,255,0.15) 52%, rgba(255,255,255,0) 100%);
background: url("../img/truefactzheader.png"), -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(51%,rgba(255,255,255,0.15)), color-stop(52%,rgba(255,255,255,0.15)), color-stop(100%,rgba(255,255,255,0)));
background: url("../img/truefactzheader.png"), -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.15) 51%,rgba(255,255,255,0.15) 52%,rgba(255,255,255,0) 100%);
background: url("../img/truefactzheader.png"), -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.15) 51%,rgba(255,255,255,0.15) 52%,rgba(255,255,255,0) 100%);
background: url("../img/truefactzheader.png"), -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.15) 51%,rgba(255,255,255,0.15) 52%,rgba(255,255,255,0) 100%);
background: url("../img/truefactzheader.png"), (linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0.15) 51%,rgba(255,255,255,0.15) 52%,rgba(255,255,255,0) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=0 );

但它仍然没有工作

4

1 回答 1

2

渐变在 CSS 3 中被视为图像，因此只需在速记属性中包含渐变和由逗号分隔的 bg-image background，现在 CSS 3 允许多个背景图像。此外，由于 CSS 从右到左解析，您必须先指定渐变，然后再指定图像​​，以便它出现在图像“上方”。

于 2013-03-09T16:45:47.050 回答