Saya bisa menetapkan opacity
properti latar belakang
properti div
saja dan tidak untuk teks di atasnya?
I've mencoba:
background: #CCC;
opacity: 0.6;
tapi ini doesn't mengubah opacity.
Kedengarannya seperti anda ingin menggunakan latar belakang transparan, dalam hal ini anda bisa mencoba menggunakan rgba()
fungsi:
rgba(R, G, B, A)
R (red), G (green), dan B (biru) dapat berupa
<integer>
s atau<persentase>
s, di mana jumlah 255 sesuai dengan 100%. A (alpha) dapat menjadi<number>
antara 0 dan 1, atau<persentase>
, dimana angka 1 sesuai dengan 100% (full opacity).
RGBa contoh
rgba(51, 170, 51, .1) / 10% buram hijau / rgba(51, 170, 51, .4) / 40% buram hijau / rgba(51, 170, 51, .7) / 70% buram hijau / rgba(51, 170, 51, 1) / penuh buram hijau /
Kecil [contoh][2] menunjukkan bagaimana rgba
dapat digunakan.
Sebagai 2018, praktis setiap browser mendukung rgba
sintaks.
Cara termudah untuk melakukan ini adalah dengan div 2, 1 dengan latar belakang dan 1 dengan teks:
#container {
position: relative;
width: 300px;
height: 200px;
}
#block {
background: #CCC;
filter: alpha(opacity=60);
/* IE */
-moz-opacity: 0.6;
/* Mozilla */
opacity: 0.6;
/* CSS3 */
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
#text {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div id="container">
<div id="block"></div>
<div id="text">Test</div>
</div>
Untuk Kurang pengguna hanya:
Jika anda don't ingin mengatur warna anda menggunakan RGBA, melainkan menggunakan HEX, ada solusi.
Anda bisa menggunakan mixin seperti:
.transparentBackgroundColorMixin(@alpha,@color) {
background-color: rgba(red(@color), green(@color), blue(@color), @alpha);
}
Dan menggunakannya seperti:
.myClass {
.transparentBackgroundColorMixin(0.6,#FFFFFF);
}
Benar-benar ini adalah apa yang built-in Kurang fungsi juga menyediakan:
.myClass {
background-color: fade(#FFFFFF, 50%);
}
Ini akan bekerja dengan setiap browser
div {
-khtml-opacity: .50;
-moz-opacity: .50;
-ms-filter: ”alpha(opacity=50)”;
filter: alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
opacity: .50;
}
Jika anda don't ingin transparansi untuk mempengaruhi seluruh wadah dan anak-anak, check pemecahan masalah ini. Anda harus benar-benar diposisikan anak dengan relatif strategis orang tua untuk mencapai hal ini. CSS Opacity Yang tidak Mempengaruhi Elemen Anak
Memeriksa kerja demo di CSS Opacity Yang Doesn't Mempengaruhi "Anak"
Aku punya masalah yang sama. Saya ingin 100% transparan warna latar belakang. Cukup gunakan kode ini; it's bekerja besar bagi saya:
rgba(54, 25, 25, .00004);
Anda dapat melihat contoh-contoh di sisi kiri pada halaman web ini (formulir kontak area).
Sebuah cara yang bagus untuk melakukan ini adalah dengan menggunakan CSS 3 memang.
Membuat div lebar kelas - misalnya supersizer di bagian atas halaman anda:
Kemudian mengatur properti CSS berikut:
.supersizer {
background: url("http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png") no-repeat center center fixed;
width: 100%;
height: 100%;
position: fixed;
z-index: -1;
opacity: 0.5;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
top: 0;
}
<div class="supersizer"></div>
Bagi siapa saja yang datang di thread ini, di sini's sebuah naskah yang disebut thatsNotYoChild.js bahwa saya hanya menulis yang memecahkan masalah ini secara otomatis:
http://www.impressivewebs.com/fixing-parent-child-opacity/
Pada dasarnya, memisahkan anak-anak dari elemen induk, namun tetap unsur dalam lokasi fisik yang sama pada halaman.
Solusi termudah adalah dengan membuat 3 div
. Salah satu yang akan berisi 2 lainnya, yang satu dengan latar belakang transparan dan satu dengan konten. Membuat div's posisi relatif dan mengatur dengan latar belakang transparan untuk negatif z-index
, kemudian mengatur posisi isi sesuai dengan latar belakang transparan. Dengan cara ini anda tidak't memiliki masalah dengan posisi absolut.
Anda dapat't. Anda harus memiliki terpisah div bahwa hanya itu latar belakang, sehingga anda hanya dapat menerapkan opacity untuk itu.
Saya mencoba melakukan hal ini baru-baru ini, dan karena saya sudah menggunakan jQuery, saya menemukan berikut untuk menjadi yang paling repot:
teks
div warna latar belakang yang kuat, karena itu akan menjadi JavaScript-kurang default.teks
div's tinggi badan, dan menerapkannya ke latar belakang
div.I'm yakin ada's beberapa jenis CSS ninja cara untuk melakukan semua ini hanya dengan mengapung atau sesuatu, tapi aku tidak't memiliki kesabaran untuk mencari tahu.