CSS：在body元素选择器中更改background-image的不透明度
[英]CSS: Change opacity of background-image within the body element selector
问题描述
I have added a background image inside body using css property as: 
我使用css属性在body中添加了一个背景图像：
body{
background-image: url('background-img.jpg');
}
Now what I want to do is add opacity property to this background image. 现在我想要做的是为此背景图像添加不透明度属性。 Can we do this without using z-index property (ie. by separating div containing background image and contents)? 我们可以不使用z-index属性（即通过分离包含背景图像和内容的div）来做到这一点吗？ If it was within a image tag I could have used opacity : value property inside css selector but its not the case. 如果它在图像标记内，我可以在css选择器中使用opacity：value属性，但事实并非如此。 Any css tricks or solutions will be appreciated!! 任何CSS技巧或解决方案将不胜感激！
3 个解决方案
解决方案1
3 2016-11-09 06:41:00
You can use background gradient with rgba() and url() property together. 您可以将background渐变与rgba()和url()属性一起使用。
Just like: 就像：
background: linear-gradient(rgba(244, 67, 54, 0.95),
rgba(33, 150, 243, 0.75),
rgba(139, 195, 74, 0.75),
rgba(255, 87, 34, 0.95)),
url("http://placehold.it/200x200");
Look at the snippet below: 看下面的代码：
body { width: 100%; height: 100%; background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6)), url("http://lorempixel.com/400/200"); }
<body>This is some text</body>
Hope this helps! 希望这可以帮助！
解决方案2
2 2016-11-09 06:34:42
div { background: url(http://placehold.it/300x300); background: linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)), url(http://placehold.it/300x300); height: 300px; width: 300px; background-repeat: no-repeat; background-size: cover; }
<div><div>
解决方案3
2 2016-11-09 07:00:34
Try this Snippet 试试这个片段
body{ height:430px; width:430px; } body::after { content: ""; background: url("https://www.google.com.pk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"); background-repeat:no-repeat; opacity: 0.5; top: 0; left: 0; bottom: 0; right: 0; position: absolute; z-index: -1; }
<body> <h1>Hello world </h1> </body>
希望这能帮到你感谢
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.