Question

我完全是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/

Answer 1

首先，看一下这个tool来创建CSS渐变。

Answer 2

变化

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透明度。

背景需要有渐变

2 个答案: