Lapisan warna semi-transparan di atas gambar latar?


213

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

Jawaban:


217

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


10
tidak ada alasan mutlak untuk penentuan posisi relatif dan absolut.
Sven Bieder

2
Ah ya, tentu saja, saya agak ke modal popup, tidak tahu mengapa. Jawaban Anda tentu saja lebih bersih dan lebih mudah.
Johannes Klauß

@ JohannesKlauß kenapa jawabannya lebih bersih dan mudah? itu tidak berfungsi, setidaknya untuk kasus saya.
Danny22

2
Saya pikir ini lebih bersih. Box-shadow memiliki masalah jika konten tidak lebih dari bg dll.
Jack

1
Solusi sempurna!
Roy Shoa

300

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.


3
Sangat bagus! Apakah ini ide bagus untuk kinerja? Belum melihat kinerja bayangan kotak
Miguel Stevens

18
Retasan bagus tapi pembunuh kinerja besar. Ini akan memperlambat setiap perangkat seluler. Box shadow menyebabkan masalah kinerja pada perangkat seluler. Lebih baik menghindarinya terutama jika ada cara lain untuk pergi.
Hexodus

4
Anda adalah seorang jenius pak!
Mika

7
Hanya pembaruan beberapa tahun kemudian: Saat ini saya menggunakan metode ini di seluruh kotulas.com, dan tidak ada penurunan signifikan yang saya perhatikan. Ini bisa menjadi masalah jika Anda menggunakannya pada ratusan elemen, tetapi bahkan pada halaman dengan 150+ gambar, itu bukan masalah bagi saya. (Dan ini ada di komputer kantor.) Tentu, Anda akan ingin mengujinya terlebih dahulu untuk memastikan bahwa itu tepat untuk Anda. Dan untuk kompatibilitas browser lama, karena mundurnya adalah bahwa pengguna tidak melihat efek hover-over (tanpa masalah lain), saya setuju dengan itu.
BevansDesign

8
Saya pribadi menggunakannya seperti ini: box-shadow: inset 0 0 0 100vmax rgba(0, 0, 0, .2).
Neurotransmitter

135

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

Ini bekerja dengan baik, Anda tidak dapat menghidupkan gradien namun jika Anda ingin memberi warna, jangan berpikir itu mungkin dengan metode apa pun.
batu bata

1
Saya telah background-size:cover;dan background-position:center center;mengatur elemen ini. Ini tampaknya membatalkan efek itu.
Solace

Bekerja dengan baik dengan ukuran latar belakang: penutup; setelah. Paling tidak pada chrome.
davidbonachera

Jelas cara yang paling mudah untuk mewarnai pola latar belakang dan gambar tetapi hati-hati untuk memeriksanya dengan Chrome dan lainnya, terutama jika diterapkan pada tag tubuh, chrome akan menggulir dengan satu ton lag. FF menanganinya dengan baik.
Hastig Zusammenstellen

4
Apakah saya satu-satunya yang cukup tua untuk mendapatkan referensi Tom?
Abram


26

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

25

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

2
Ini adalah jawaban yang sangat bagus yang tidak memerlukan elemen HTML tambahan. Terima kasih!
patr1ck

16

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


Ini berfungsi, tetapi Anda perlu mengubah "kiri: 0;" yang kedua ke "bawah: 0;"
Matthew Hudson

1
Ini harus menjadi jawaban yang diterima karena menghindari pembuatan elemen yang tidak perlu. Pastikan saja .background-image Anda divmemiliki setidaknya posisi: relatif
mjsarfatti

6

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.

4
Tolong jangan memposting tautan sebagai jawaban. Masukkan kode yang relevan di sini, tetapi tautkan ke sumber yang Anda salin sebagai tambahan.
Blazemonger

4

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


Bisakah Anda menerapkan warna latar belakang misalnya :hoverdan itu akan overlay di atas gambar latar belakang?
Tuan

akan membutuhkan waktu lebih lama untuk mem-boot Photoshop dan melakukan ini, daripada menambahkan beberapa baris kode.
nihiser

Saya mencoba ini tetapi menemukan png transparan cukup besar (~ 500kb) dalam ukuran file, yang mungkin merupakan kelemahan dari pendekatan ini
madz

@ Ahmad Saya berbicara tentang membuat pola - yang seharusnya tidak menghasilkan file besar. Saya menambahkan contoh menggunakan gambar 110x110px yang hanya memiliki 5kb. Jika Anda benar-benar membutuhkan gambar yang lebih besar, coba gunakan tinypng.com untuk mengompresnya.
Hexodus

2

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


2

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>


1

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;

0

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

0

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.

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.