Bagaimana cara menggelapkan latar belakang menggunakan CSS?

Saya memiliki elemen dengan teks di dalamnya. Setiap kali saya menurunkan opacity, maka saya menurunkan opacity dari seluruh tubuh. Adakah cara agar saya bisa membuat background-imagelebih gelap, dan bukan yang lainnya?

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

Cukup tambahkan kode ini ke css gambar Anda

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

Referensi: linear-gradient () - CSS | MDN

UPDATE: Tidak semua browser mendukung RGBa, jadi Anda harus memiliki 'warna fallback'. Warna ini kemungkinan besar akan solid (sepenuhnya buram) mis background:rgb(96, 96, 96). : . Lihat blog ini untuk dukungan browser RGBa.

Gunakan: setelah 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;
}

Lihat pulpen saya>

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

Pengaturan background-blend-modeke darkenakan menjadi cara yang paling langsung dan terpendek untuk mencapai tujuan, namun Anda harus menetapkan yang background-colorpertama agar mode campuran berfungsi.
Ini juga merupakan cara terbaik jika Anda perlu memanipulasi nilai dalam javascript nanti.

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;

Bisa saya gunakan untuk background-blend

Ini mungkin bisa dilakukan dengan box-shadow

namun, saya tidak bisa menerapkannya pada gambar. Hanya pada latar belakang warna solid

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>

Anda dapat menggunakan wadah untuk latar belakang Anda, ditempatkan sebagai indeks-z absolut dan negatif: 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;
}

Hanya untuk menambahkan apa yang sudah ada di sini, gunakan yang berikut ini:

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

... untuk dukungan lintas-browser dari hamparan gradien linier 70%. Untuk mencerahkan gambar, Anda dapat mengubah semua 0,0,0itu menjadi 255,255,255. Jika 70% agak banyak, lanjutkan dan ubah .7. Dan, untuk referensi di masa mendatang, lihat ini: http://www.colorzilla.com/gradient-editor/

ketika Anda ingin kecerahan atau warna background yang lebih gelap, Anda dapat menggunakan kode css ini

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

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

Bagi saya pendekatan filter / gradien tidak berfungsi (mungkin karena CSS yang ada) jadi saya menggunakan :beforetrik pseudo styling sebagai gantinya:

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