如何使用CSS使背景变暗？

我有一个包含文本的元素。 每当我减less不透明度，然后我减less全身的不透明度。 有什么办法可以让background-image变得更暗，而不是其他所有东西？

 background-image:url('http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png'); 

Answer 1

只需将此代码添加到您的图像CSS

 background: /* top, transparent black, faked with gradient */ linear-gradient( rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) ), /* bottom, image */ url(http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png); } 

参考： linear-gradient（） – CSS | MDN

更新：不是所有的浏览器都支持RGBa，所以你应该有一个'后备颜色'。 这种颜色很可能是固体（完全不透明），例如： background:rgb(96, 96, 96) 。 请参考这个博客的RGBa浏览器支持。

Answer 2

使用：在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; } 

看看我的笔>

http://codepen.io/craigocurtis/pen/KzXYad

Answer 3

你可以使用一个容器作为你的背景，放置为绝对的和负的z-index： http : //jsfiddle.net/2YW7g/

HTML

 <div class="main"> <div class="bg"> </div> Hello World!!!! </div> 

CSS

 .main{ width:400px; height:400px; position:relative; color:red; background-color:transparent; font-size:18px; } .main .bg{ position:absolute; width:400px; height:400px; background-image:url("http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png"); z-index:-1; } .main:hover .bg{ opacity:0.5; } 

Answer 4

只要添加到已经在这里，使用以下内容：

 background: -moz-linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)); background: -webkit-linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)); background: linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)); filter: unquote("progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3000000', endColorstr='#b3000000',GradientType=0 )"); 

…支持70％线性渐变叠加的跨浏览器。 为了使图像变亮，可以将所有这些0,0,0变成255,255,255 。 如果70％有点多，请继续并改变.7 。 而且，为了将来的参考检查这个： http : //www.colorzilla.com/gradient-editor/

Answer 5

有可能用box-shadow做到这一点

然而，我不能得到它实际适用于图像。 只有在纯色背景上

 body { background: #131418; color: #999; text-align: center; } .mycooldiv { width: 400px; height: 300px; margin: 2% auto; border-radius: 100%; } .red { background: red } .blue { background: blue } .yellow { background: yellow } .green { background: green } #darken { box-shadow: inset 0px 0px 400px 110px rgba(0, 0, 0, .7); /*darkness level control - change the alpha value for the color for darken/ligheter effect */ } 

 Red <div class="mycooldiv red"></div> Darkened Red <div class="mycooldiv red" id="darken"></div> Blue <div class="mycooldiv blue"></div> Darkened Blue <div class="mycooldiv blue" id="darken"></div> Yellow <div class="mycooldiv yellow"></div> Darkened Yellow <div class="mycooldiv yellow" id="darken"></div> Green <div class="mycooldiv green"></div> Darkened Green <div class="mycooldiv green" id="darken"></div> 

Answer 6

对于我来说，滤镜/渐变方法不起作用（可能是由于现有的CSS），所以我使用:before伪造造型技巧:before ：

 .eventBannerContainer { position: relative; } .eventBannerContainer:before { background-color: black; height: 100%; width: 100%; content: ""; opacity: 0.5; position: absolute; display: block; } /* make any immediate child elements above our darkening mask */ .eventBannerContainer > * { position: relative; }