Làm cách nào để làm tối nền bằng CSS?

Tôi có một phần tử với văn bản trong đó. Bất cứ khi nào tôi giảm độ mờ, sau đó tôi giảm độ mờ của toàn bộ nội dung. Có cách nào tôi có thể chỉ làm cho bóng background-imagetối hơn, chứ không phải mọi thứ khác không?

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

Chỉ cần thêm mã này vào css hình ảnh của bạn

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

Tham khảo: linear-gradient () - CSS | MDN

CẬP NHẬT: Không phải tất cả các trình duyệt đều hỗ trợ RGBa, vì vậy bạn nên có 'màu dự phòng'. Màu này sẽ được rất có thể là rắn (hoàn toàn mờ đục) ví dụ: background:rgb(96, 96, 96). Tham khảo blog này để được hỗ trợ trình duyệt RGBa.

Sử dụng: sau 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;
}

Kiểm tra bút của tôi>

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

Đặt background-blend-modethành darkensẽ là cách trực tiếp nhất và ngắn nhất để đạt được mục đích tuy nhiên bạn phải đặt background-colorchế độ hòa trộn đầu tiên để hoạt động.
Đây cũng là cách tốt nhất nếu sau này bạn cần thao tác các giá trị trong 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;

Tôi có thể sử dụng để trộn nền không

Có thể làm điều này với box-shadow

tuy nhiên, tôi không thể làm cho nó thực sự áp dụng cho một hình ảnh. Chỉ trên nền đồng màu

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>

Bạn có thể sử dụng một vùng chứa cho nền của mình, được đặt dưới dạng z-index tuyệt đối và phủ định: 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;
}

Chỉ để thêm vào những gì đã có ở đây, sử dụng như sau:

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

... để hỗ trợ nhiều trình duyệt của lớp phủ gradient tuyến tính 70%. Để làm sáng hình ảnh, bạn có thể thay đổi tất cả những thứ đó 0,0,0thành 255,255,255's. Nếu 70% là hơi nhiều, hãy tiếp tục và thay đổi .7. Và, để tham khảo trong tương lai, hãy xem phần này: http://www.colorzilla.com/gradient-editor/

khi bạn muốn tăng độ sáng hoặc tối hơn của màu nền, bạn có thể sử dụng mã css này

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

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

Đối với tôi, cách tiếp cận bộ lọc / gradient không hoạt động (có lẽ do CSS hiện có) vì vậy tôi đã sử dụng :beforethủ thuật tạo kiểu giả để thay thế:

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