如何使用CSS使背景变暗？

Question

我有一个带文字的元素.每当我降低不透明度时,我就会减少整个体的不透明度.有什么方法可以让我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即可

 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(http://fc02.deviantart.net/fs71/i/2011/274/6/f/ocean__sky__stars__and_you_by_muddymelly-d4bg1ub.png);
    }

参考:linear-gradient() - CSS | MDN

更新:并非所有浏览器都支持RGBa,因此您应该拥有"后备颜色".这种颜色很可能是实心的(完全不透明的)ex : 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

设置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;

Answer 4

当您想要使背景颜色变亮或更暗时，可以使用此 css 代码

.brighter-span {
  filter: brightness(150%);
}

.darker-span {
  filter: brightness(50%);
}

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>