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

即可

＆＃13;

 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);
    }

＆＃13;

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

更新：并非所有浏览器都支持RGBa，因此您应该拥有＆＃39;后备颜色＆＃39;。这种颜色很可能是实体（完全不透明）ex：background:rgb(96, 96, 96)。有关RGBa浏览器支持，请参阅此blog。

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;
}

查看我的笔＆gt;

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

可以使用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 5

您可以使用容器作为背景，放置为绝对和负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 6

只是添加到此处已有的内容，请使用以下内容：

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＆＃39}。如果70％有点多，请继续更改.7。并且，为了将来参考，请查看：http://www.colorzilla.com/gradient-editor/

Answer 7

对我来说，过滤/渐变方法不起作用（可能是由于现有的CSS）所以我使用了: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;
}

Answer 8

当您想增亮或调暗背景色时，可以使用此CSS代码

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

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

Answer 9

这是我找到的最简单的方法

  background: black;
  opacity: 0.5;

Answer 10

基于 Alex Price's 的回答，我做了一个 scss mixin：

@function decToHex($dec) {
    $dec: round($dec);
    $hex: "0123456789ABCDEF";
    $first: (($dec - $dec % 16)/16)+1;
    $second: ($dec % 16)+1;
    @return str-slice($hex, $first, $first) + str-slice($hex, $second, $second);
}

@mixin darken-bg ($darkAmount) {
    $filterHex: decToHex(255 * $darkAmount);
    background: -moz-linear-gradient(rgba(0, 0, 0, $darkAmount),rgba(0, 0, 0, $darkAmount));
    background: -webkit-linear-gradient(rgba(0, 0, 0, $darkAmount),rgba(0, 0, 0, $darkAmount));
    background: linear-gradient(rgba(0, 0, 0, $darkAmount),rgba(0, 0, 0, $darkAmount));
    filter: unquote("progid:DXImageTransform.Microsoft.gradient( startColorstr='##{$filterHex}000000', endColorstr='##{$filterHex}000000',GradientType=0 )");
}

/* usage */
.some-div {
    @include darken-bg(0.2);
}

decToHex 基于 Pierpaolo Cira 答案

如何使用CSS使背景变暗？

10 个答案: