[英]How do you set background-color rgba on the body with background-image also?
How would I go about setting the rgba of the body along with a background image? 我将如何设置身体的rgba以及背景图像? I want the rgba to show up on top of the background image and stay there. 我希望rgba出现在背景图像的顶部并留在那里。 A transparent color on top of the image Here is my css: 图像顶部的透明颜色这是我的CSS:
body{
background:url(image.jpg) no-repeat center center fixed;
background-size:cover;
background-color:rgba(255,0,0,0.5);
}
fiddle example: http://jsfiddle.net/zt6sfs21/ 小提琴示例: http : //jsfiddle.net/zt6sfs21/
See the specification : 参见规格 :
Name: background
Value: [ <bg-layer> , ]* <final-bg-layer>
and 和
<final-bg-layer> = <bg-image> || <position> [ / <bg-size> ]? || <repeat-style> || <attachment> || <box> || <box> || <'background-color'>
Just specify the background colour along with the other properties. 只需指定背景颜色以及其他属性即可。
background:url(image.jpg) no-repeat center center fixed rgba(255,0,0,0.5);
ah, you weren't explaining yourself, I think what you're looking for is this: 啊,您不是要解释自己,我想您要的是这样的:
add this HTML on top of your body: 在您的身体上添加以下HTML :
<div class="overlay"></div>
and then this CSS 然后这个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%;
}
You could do the same applying a full background to the body
and then using the image as a background for .overlay
div, then apply an opacity:0.5
property (or whatever). 您可以执行相同的操作,将整个背景应用于body
,然后将图像用作.overlay
div的背景,然后应用opacity:0.5
属性(或其他属性)。 Of course this approach would apply for your situation were you're using full body width and height, but you could also use a div
or whatever element with any size 当然,如果您使用的是整个身体的宽度和高度,那么这种方法将适用于您的情况,但是您也可以使用div
或任何大小的元素
If you want have an image overlaid color, you have to use another element to the fore. 如果要使图像覆盖颜色,则必须使用其他元素。 Here is example: 这是示例:
CSS: 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);
}
and html: 和html:
<div class="content">
[other elements]
</div>
http://jsfiddle.net/vv17uc16/ http://jsfiddle.net/vv17uc16/
edit: yop, Fabio was first... 编辑:是的,法比奥是第一个...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.