如何使用CSS使背景变暗？
如何使用CSS使背景变暗？
提问于 2014-04-22 08:18:27
我有一个包含文本的元素。每当我降低不透明度时，我就会降低整个身体的不透明度。有没有什么办法可以让background-image变暗，而不是其他所有东西？
background-image:url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png');回答 9
Stack Overflow用户
回答已采纳
发布于 2014-04-22 08:45:08
只需将此代码添加到您的图像css
body{
background:
/* top, transparent black, faked with gradient */
linear-gradient(
rgba(0, 0, 0, 0.7),
rgba(0, 0, 0, 0.7)
),
/* bottom, image */
url(https://images.unsplash.com/photo-1614030424754-24d0eebd46b2);
}
参考：linear-gradient() - CSS | MDN
更新:并不是所有的浏览器都支持RGBa，所以你应该有一个“后备颜色”。此颜色很可能是纯色(完全不透明)，例如：background:rgb(96, 96, 96)。有关RGBa浏览器支持，请参阅此blog。
Stack Overflow用户
发布于 2016-04-04 03:39:05
在psuedo-element后使用：
.overlay {
position: relative;
transition: all 1s;
}
.overlay:after {
content: '\A';
position: absolute;
width: 100%;
height:100%;
top:0;
left:0;
background:rgba(0,0,0,0.5);
opacity: 1;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.overlay:hover:after {
opacity: 0;
}看看我的笔>
Stack Overflow用户
发布于 2018-10-28 00:24:41
将background-blend-mode设置为darken是实现此目的的最直接和最快捷的方法，但是您必须首先设置一个background-color才能使混合模式工作。
如果您稍后需要在javascript中操作这些值，这也是最好的方法。
background: rgba(0, 0, 0, .65) url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png');
background-blend-mode: darken;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23208200
复制相关文章
相似问题