0

我对 css 完全是个菜鸟，我需要在页面顶部的背景图像中添加渐变。这是我尝试过的，但显然它不能作为背景覆盖值。我该如何解决

我有一个背景图像，我需要在它上面有一个渐变。这是我的CSS

body.test {
    /* Mozilla: */
    background: -moz-linear-gradient(top, #00FF00, #000000);
    /* Chrome, Safari:*/
    background: -webkit-gradient(linear,
    left top, left bottom, from(#00FF00), to(#000000));
    /* MSIE */
    filter: progid:DXImageTransform.Microsoft.Gradient(
        StartColorStr='#00FF00', EndColorStr='#000000', GradientType=0);
background: url(../mybackground.png);
}

在这里测试 http://jsfiddle.net/PsDuF/

4

2 回答 2

1

首先，看看这个用于创建 CSS 渐变的工具。

于 2012-08-09T22:14:23.173 回答
0

改变

background: url(../mybackground.png);

到

background-image:  url(../mybackground.png);

background是简写语法。或者，您可以将图像与其他语法结合起来：

background:  url(../mybackground.png), -moz-linear-gradient(top, #00FF00, #000000);

在您的情况下，您要声明background多次，因此每次声明它时，您都会覆盖先前的声明。

当您在一个声明中声明多个背景时，您声明它们的顺序将改变堆叠顺序。使用图像和 mozilla 背景渐变的 JSBIN 示例：jsbin.com/abumuz/1

请注意，如果您希望在图像顶部使用渐变，但仍想查看图像，则需要确保您的渐变具有 Alpha 透明度。

于 2012-08-09T22:14:14.537 回答