Lapisan warna semi-transparan di atas gambar latar?

Saya memiliki DIV dan saya ingin menempatkan pola sebagai latar belakang. Pola ini berwarna abu-abu. Jadi untuk membuatnya sedikit lebih bagus, saya ingin meletakkan "lapisan" warna transparan terang. Di bawah ini adalah apa yang saya coba tetapi tidak berhasil. Apakah ada cara untuk meletakkan lapisan berwarna di atas gambar latar belakang?

Inilah CSS saya:

background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);

Ini dia:

.background {
    background:url('../img/bg/diagonalnoise.png');
    position: relative;
}

.layer {
    background-color: rgba(248, 247, 216, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

HTML untuk ini:

<div class="background">
    <div class="layer">
    </div>
</div>

Tentu saja Anda perlu mendefinisikan lebar dan tinggi ke .backgroundkelas, jika tidak ada elemen lain di dalamnya

Saya tahu ini adalah utas yang sangat lama, tetapi muncul di bagian atas di Google, jadi inilah opsi lain.

Ini adalah CSS murni, dan tidak memerlukan HTML tambahan.

box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);

Ada sejumlah kegunaan mengejutkan untuk fitur bayangan kotak.

Dari CSS-Trik ... ada satu langkah cara untuk melakukan ini tanpa pengindeksan z dan menambahkan elemen semu - memerlukan gradien linier yang saya pikir berarti Anda memerlukan dukungan CSS3

.tinted-image {
  background-image: 
    /* top, transparent red */
    linear-gradient(
      rgba(255, 0, 0, 0.45), 
      rgba(255, 0, 0, 0.45)
    ),
    /* your image */
    url(image.jpg);
}

Anda juga dapat menggunakan gradien linier dan gambar: http://codepen.io/anon/pen/RPweox

.background{
  background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
    url('http://www.imageurl.com');
}

Ini karena fungsi gradien linier membuat Gambar yang ditambahkan ke tumpukan latar belakang. https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Anda perlu elemen pembungkus dengan gambar bg dan di dalamnya elemen konten dengan warna bg:

<div id="Wrapper">
  <div id="Content">
    <!-- content here -->
  </div>
</div>

dan css:

#Wrapper{
    background:url(../img/bg/diagonalnoise.png); 
    width:300px; 
    height:300px;
}

#Content{
    background-color:rgba(248,247,216,0.7); 
    width:100%; 
    height:100%;
}

Coba ini. Bekerja untukku.

.background {
    background-image: url(images/images.jpg);
    display: block;
    position: relative;
}

.background::after {
    content: "";
    background: rgba(45, 88, 35, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.background > * {
    z-index: 10;
}

Saya telah menggunakan ini sebagai cara untuk menerapkan warna serta gradien pada gambar untuk membuat teks overlay dinamis lebih mudah untuk ditata untuk keterbacaan ketika Anda tidak dapat mengontrol profil warna gambar. Anda tidak perlu khawatir tentang indeks-z.

HTML

<div class="background-image"></div>

KELANCANGAN

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
  &:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(248, 247, 216, 0.7);
  }
}

CSS

.background-image {
  background: url('../img/bg/diagonalnoise.png') repeat;
}

.background-image:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(248, 247, 216, 0.7);
  }

Semoga ini bisa membantu

Lihat jawaban saya di https://stackoverflow.com/a/18471979/193494 untuk ikhtisar komprehensif tentang solusi yang mungkin:

1. menggunakan banyak latar belakang dengan gradien linier,
2. beberapa latar belakang dengan PNG yang dihasilkan, atau
3. styling a: setelah pseudoelement untuk bertindak sebagai lapisan latar belakang sekunder.

Kenapa begitu rumit? Solusi Anda hampir benar kecuali itu cara yang lebih mudah untuk membuat pola transparan dan warna latar belakang menjadi solid . PNG dapat berisi transparansi. Jadi gunakan photoshop untuk membuat pola transparan dengan mengatur layer ke 70% dan menyimpan ulang gambar Anda. Maka Anda hanya perlu satu pemilih. Bekerja lintas browser.

CSS:

.background {
   background: url('../img/bg/diagonalnoise.png');/* transparent png image*/
   background-color: rgb(248, 247, 216);
}

HTML:

<div class="background">
   ...
</div> 

Ini dasar. Contoh penggunaan berikut di mana saya beralih dari backgroundke background-imagetapi kedua sifat bekerja sama.

body { margin: 0; }
div {
   height: 110px !important;
   padding: 1em;
   text-transform: uppercase;
   font-family: Arial, Helvetica, sans-serif;
   font-weight: 600;
   color: white;
   text-shadow: 0 0 2px #333;
}
.background {
   background-image: url('https://www.transparenttextures.com/patterns/arabesque.png');/* transparent png image */
   }
.col-one {
  background-color: rgb(255, 255, 0);
}
.col-two {
  background-color: rgb(0, 255, 255);
}
.col-three {
  background-color: rgb(0, 255, 0);
}

<div class="background col-one">
 1. Background
</div> 
<div class="background col-two">
 2. Background
</div> 
<div class="background col-three">
 3. Background
</div> 

TUNGGU MENIT! DIBUTUHKAN BEBERAPA WAKTU UNTUK MENDAPAT POLA EKSTERNAL.

Situs web ini tampaknya agak lambat ...

Anda dapat menggunakan piksel semitransparan, yang dapat Anda hasilkan misalnya di sini , bahkan di base64 Berikut adalah contoh dengan 50% putih:

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=),
url(../img/leftpanel/intro1.png);
background-size: cover, cover;

• tanpa mengunggah

• tanpa html tambahan

• Saya kira pemuatan harus lebih cepat daripada bayangan kotak atau gradien linier

Ini adalah trik yang lebih sederhana dengan hanya css.

<div class="background"> </div>
    <style>
    .background {
      position:relative;
      height:50px;
      background-color: rgba(248, 247, 216, 0.7);
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAJElEQVQYV2NctWrVfwYkEBYWxojMZ6SDAmT7QGx0K1EcRBsFAADeG/3M/HteAAAAAElFTkSuQmCC); 
    }

    .background:after {
        content:" ";
        background-color:inherit;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; 
    }

    </style>

Lain dengan SVG sebagai inline overlay-image (catatan: jika Anda menggunakan #di dalam svg-code Anda harus urlencode itu!):

background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1 1"><path fill="rgba(255, 255, 255, 0.4)" d="M0 0h1v1H0z"/></svg>')
                no-repeat center center/cover, 
            url('overlayed-image.jpg') no-repeat center center/cover;

Saya hanya menggunakan properti css background-image pada target background div.
Catatan background-image hanya menerima fungsi warna gradien.
Jadi saya menggunakan linear-gradient menambahkan warna overlay yang diinginkan dua kali (gunakan nilai rgba terakhir untuk mengontrol opacity warna).

Juga, temukan dua sumber daya yang bermanfaat ini untuk:

1. Tambahkan teks (atau div dengan konten lain) di atas gambar latar belakang: Gambar Pahlawan
2. Mengaburkan gambar latar belakang saja, tanpa mengaburkan div di atas: Gambar Latar Kabur

HTML

<div class="header_div">
</div>

<div class="header_text">
  <h1>Header Text</h1>
</div>

CSS

.header_div {
  position: relative;
  text-align: cover;
  min-height: 90vh;
  margin-top: 5vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  background-image: linear-gradient(rgba(38, 32, 96, 0.2), rgba(38, 32, 96, 0.4)), url("images\\header img2.jpg");
  filter: blur(2px);
}

.header_text {
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
}

Anda juga dapat menambahkan opacity ke warna overlay Anda.

Alih-alih melakukan

background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);

Anda dapat melakukan:

background: url('../img/bg/diagonalnoise.png');

Kemudian buat gaya baru untuk warna opacity:

.colorStyle{
    background-color: rgba(248, 247, 216, 0.7);
    opacity: 0.8;
}

Ubah opacity ke nomor apa pun yang Anda inginkan di bawah 1. Kemudian Anda membuat gaya warna ini ukuran yang sama dengan gambar Anda. Itu harus bekerja.