Bagaimana cara menggelapkan latar belakang menggunakan CSS?


100

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

Jawaban:


197

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.


Ada masalah lintas browser dengan ini?
Jon P

9
Apa properti jika kita ingin menentukan gambar latar belakang secara terpisah dan ini?
Petruza

2
@Petruza tampaknya kami tidak punya pilihan selain menggunakan sintaks ini. Baca referensi : "Karena <gradient> termasuk dalam tipe data <image>, maka <image> hanya dapat digunakan jika <image> dapat digunakan. Oleh karena itu, gradien linier () tidak akan berfungsi pada warna latar belakang dan properti lain yang menggunakan tipe data <warna> "
Marco Panichi

18

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


Bagus tapi tidak berfungsi di Firefox 47.0.1 di windows 10. Tetapi bekerja dengan IE. Apakah Anda memiliki perbaikan untuk firefox?
John Max

2
@JohnMax Firefox berfungsi dengan baik sekarang. Hanya harus menunggu beberapa tahun.
Craig O. Curtis

10

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


1
edge atau IE11 sebenarnya bukan browser
stackdave

6

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>


2

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

2

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/


1

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

Terima kasih, saya tidak tahu tentang filter css . Jika itu membantu seseorang, inilah status Can I Use (Maret, 2020).
Reed Dunkle

0

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

Sejak default display untuk ::beforeini inlinetidak akan menerima widthdan height.
connexo

Terima kasih @connexo, sepertinya saya melewatkannya saat menyalin gaya yang relevan.
Daniel Sokolowski
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.