我有一个包含文本的元素。每当我降低不透明度时,我就会降低整个身体的不透明度。有没有什么办法可以让background-image
变暗,而不是其他所有东西?
background-image:url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png');
发布于 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。
发布于 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;
}
看看我的笔>
发布于 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;
https://stackoverflow.com/questions/23208200
复制相似问题