Question

我如何设置身体的rgba以及背景图像？我希望rgba出现在背景图像之上并留在那里。图像顶部的透明色这是我的css：

body{
 background:url(image.jpg) no-repeat center center fixed; 
 background-size:cover;
 background-color:rgba(255,0,0,0.5);
}

小提琴示例：http://jsfiddle.net/zt6sfs21/

Answer 1

请参阅the specification：

Name:   background
Value:  [ <bg-layer> , ]* <final-bg-layer>

和

<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>

只需指定背景颜色以及其他属性。

 background:url(image.jpg) no-repeat center center fixed rgba(255,0,0,0.5);

Answer 2

啊，你没有解释自己，我想你正在寻找的是：

在您的身体上添加 HTML ：

<div class="overlay"></div>

然后是 CSS

body {
    background:url(http://upload.wikimedia.org/wikipedia/commons/d/d3/Nelumno_nucifera_open_flower_-_botanic_garden_adelaide2.jpg) no-repeat center center fixed;
    background-size:cover;
}
.overlay {
    background-color:rgba(255, 0, 0, 0.5);
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
}

see fiddle here

您可以将完整的背景应用于body，然后将图像用作.overlay div的背景，然后应用opacity:0.5属性（或其他）。当然，如果您使用的是全身宽度和高度，这种方法适用于您的情况，但您也可以使用div或任何大小的元素

Answer 3

如果您想要图像覆盖颜色，则必须使用另一个元素。这是一个例子：

CSS：

html{
    height:100%;
}
body{
    background:url(http://upload.wikimedia.org/wikipedia/commons/d/d3/Nelumno_nucifera_open_flower_-_botanic_garden_adelaide2.jpg) no-repeat center center fixed; 
    background-size:cover;
    margin:0;
    height:100%
}
.content{
    height:100%;
    background-color:rgba(255,0,0,0.5);
}

和html：

<div class="content">
    [other elements]
</div>

http://jsfiddle.net/vv17uc16/

编辑：yop，Fabio是第一个...

你如何用背景图像在身体上设置背景颜色rgba？

3 个答案: