Saya menggunakan sesuatu yang mirip dengan kode berikut:
<div style="opacity:0.4; background-image:url(...);">
<div style="opacity:1.0;">
Text
</div>
</div>
Saya berharap hal ini membuat latar belakang yang telah opacity dari 0,4 dan teks untuk memiliki 100% opacity. Bukannya mereka berdua memiliki opacity dari 0.4.
Anak-anak mewarisi opacity. It'd menjadi aneh dan tidak nyaman jika mereka didn't.
Anda dapat menggunakan tembus file PNG untuk gambar latar belakang anda, atau menggunakan RGBa (a untuk alpha) warna untuk warna latar belakang.
Misalnya, 50% memudar latar belakang hitam:
<div style="background-color:rgba(0, 0, 0, 0.5);">
<div>
Text added.
</div>
</div>
Anda dapat menggunakan CSS 3 :sebelum
untuk memiliki semi-transparan latar belakang dan anda dapat melakukan ini hanya dengan satu wadah. Menggunakan sesuatu seperti ini
<article>
Text.
</article>
Kemudian menerapkan beberapa CSS
article {
position: relative;
z-index: 1;
}
article::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: .4;
z-index: -1;
background: url(path/to/your/image);
}
Contoh: http://codepen.io/anon/pen/avdsi
Catatan: Anda mungkin perlu untuk menyesuaikan z-index
nilai-nilai.
Berikut metode yang dapat digunakan untuk memecahkan masalah anda:
Menggunakan gambar PNG transparan sesuai dengan pilihan anda sebagai latar belakang.
Menggunakan CSS berikut potongan kode untuk membuat cross-browser alpha-latar belakang transparan. Berikut ini adalah contoh dengan #000000
@ 0.4% opacity
.div { latar belakang:rgb(0,0,0); latar belakang: transparan\9; latar belakang:rgba(0,0,0,0.4); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); zoom: 1; } .div:nth-child(n) { filter: none; }
Untuk rincian lebih lanjut mengenai teknik ini, lihat ini, yang memiliki online CSS generator.
Aku akan melakukan sesuatu seperti ini
<div class="container">
<div class="text">
<p>text yay!</p>
</div>
</div>
CSS:
.container {
position: relative;
}
.container::before {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: url('/path/to/image.png');
opacity: .4;
content: "";
z-index: -1;
}
Itu harus bekerja. Ini adalah asumsi anda diwajibkan untuk memiliki gambar semi-transparan BTW, dan bukan warna (yang anda harus hanya menggunakan rgba untuk). Juga diasumsikan bahwa anda dapat't hanya mengubah opacity dari gambar sebelumnya di Photoshop.
Anda dapat menggunakan Sass' transparentize
.
Saya menemukan ini untuk menjadi yang paling berguna dan sederhana untuk digunakan.
transparentize(rgba(0, 0, 0, 0.5), 0.1) => rgba(0, 0, 0, 0.4)
transparentize(rgba(0, 0, 0, 0.8), 0.2) => rgba(0, 0, 0, 0.6)
Melihat lebih banyak: #transparentize($warna, $jumlah) ⇒ Sass::Skrip::Nilai::Color
.transbg{/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";}
Hal ini karena batin div telah 100% opacity dari div hal ini bersarang di dalam (yang memiliki 40% opacity).
Dalam rangka untuk menghindari hal itu, ada beberapa hal yang bisa anda lakukan.
Anda bisa membuat dua terpisah div seperti ini:
<div id="background"></div>
<div id="bContent"></div>
Set yang anda inginkan CSS opacity dan sifat-sifat lainnya untuk latar belakang dan menggunakan z-index property (z-index) untuk gaya dan posisi bContent div. Dengan ini, anda dapat menempatkan div overtope dari latar belakang div tanpa itu's opacity mucked dengan.
Pilihan lain adalah untuk RGBa. Ini akan memungkinkan anda untuk sarang anda divs dan masih mencapai div spesifik opacity.
Opsi terakhir adalah untuk hanya membuat semi transparan .png gambar dari warna yang anda inginkan dalam gambar yang anda inginkan editor pilihan anda, mengatur latar belakang-gambar properti untuk URL gambar dan kemudian anda memenangkan't perlu khawatir tentang menggunakan CSS dan kehilangan kemampuan organisasi dan bersarang div struktur.
Hanya pastikan untuk menempatkan lebar dan tinggi untuk latar depan yang sama dengan latar belakang, atau mencoba untuk atas, bawah, kiri dan kanan properties.
<style>
.foreground, .background {
position: absolute;
}
.foreground {
z-index: 1;
}
.background {
background-image: url(your/image/here.jpg);
opacity: 0.4;
}
</style>
<div class="foreground"></div>
<div class="background"></div>