Untuk warna latar semi-transparan sederhana, solusi di atas (gambar CSS3 atau bg) adalah pilihan terbaik. Namun, jika Anda ingin melakukan sesuatu yang lebih menarik (mis. Animasi, banyak latar belakang, dll.), Atau jika Anda tidak ingin bergantung pada CSS3, Anda dapat mencoba "teknik pane":
.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
position: relative;
}
.pane > .back {
position: absolute;
width: 100%; height: 100%;
top: auto; bottom: auto; left: auto; right: auto;
}
.pane > .cont {
position: relative;
z-index: 10;
}
<p class="pane">
<span class="back" style="background-color: green; opacity: 0.6;"></span>
<span class="cont" style="color: white;">Hello world</span>
</p>
Teknik ini bekerja dengan menggunakan dua "lapisan" di dalam elemen panel luar:
- satu ("belakang") yang sesuai dengan ukuran elemen panel tanpa mempengaruhi aliran konten,
- dan satu ("cont") yang berisi konten dan membantu menentukan ukuran panel.
The position: relativepada panel penting; itu memberitahu lapisan belakang agar sesuai dengan ukuran panel. (Jika Anda ingin <p>tag menjadi absolut, ubah panel dari a <p>ke a <span>dan bungkus semua itu dalam <p>tag posisi absolut .)
Keuntungan utama teknik ini memiliki lebih dari yang serupa yang tercantum di atas adalah bahwa panel tidak harus menjadi ukuran yang ditentukan; seperti dikodekan di atas, itu akan cocok dengan lebar penuh (tata letak elemen blok normal) dan hanya setinggi konten. Elemen panel luar dapat ukuran sesuka Anda, selama itu persegi panjang (yaitu blok inline akan berfungsi; inline biasa tidak akan).
Juga, itu memberi Anda banyak kebebasan untuk latar belakang; Anda bebas untuk meletakkan apa pun di elemen belakang dan membuatnya tidak mempengaruhi aliran konten (jika Anda ingin beberapa sub-layer ukuran penuh, pastikan mereka juga memiliki posisi: absolut, lebar / tinggi: 100%, dan atas / bawah / kiri / kanan: otomatis).
Satu variasi untuk memungkinkan penyesuaian inset latar belakang (melalui atas / bawah / kiri / kanan) dan / atau penyematan latar belakang (dengan menghapus salah satu pasangan kiri / kanan atau atas / bawah) adalah menggunakan CSS berikut sebagai gantinya:
.pane > .back {
position: absolute;
width: auto; height: auto;
top: 0px; bottom: 0px; left: 0px; right: 0px;
}
Seperti yang tertulis, ini berfungsi di Firefox, Safari, Chrome, IE8 +, dan Opera, meskipun IE7 dan IE6 membutuhkan CSS dan ekspresi tambahan, IIRC, dan terakhir kali saya memeriksa, variasi CSS kedua tidak berfungsi di Opera.
Hal-hal yang harus diperhatikan:
- Elemen mengambang di dalam lapisan cont tidak akan terkandung. Anda harus memastikan semuanya sudah bersih atau terkandung, atau mereka akan keluar dari bawah.
- Margin pergi pada elemen panel dan padding pergi pada elemen cont. Jangan gunakan sebaliknya (margin pada cont atau padding pada panel) atau Anda akan menemukan keanehan seperti halaman yang selalu sedikit lebih lebar dari jendela browser.
- Seperti yang disebutkan, semuanya harus berupa blok atau inline-blok. Jangan ragu untuk menggunakan
<div>s bukannya <span>s untuk menyederhanakan CSS Anda.
Demo yang lebih lengkap, memamerkan fleksibilitas teknik ini dengan menggunakannya bersama-sama display: inline-block, dan dengan keduanya auto& widths / s spesifik min-height:
.pane, .pane > .back, .pane > .cont { display: block; }
.pane {
position: relative;
width: 175px; min-height: 100px;
margin: 8px;
}
.pane > .back {
position: absolute; z-index: 1;
width: auto; height: auto;
top: 8px; bottom: 8px; left: 8px; right: 8px;
}
.pane > .cont {
position: relative; z-index: 10;
}
.debug_red { background: rgba(255, 0, 0, 0.5); border: 1px solid rgba(255, 0, 0, 0.75); }
.debug_green { background: rgba(0, 255, 0, 0.5); border: 1px solid rgba(0, 255, 0, 0.75); }
.debug_blue { background: rgba(0, 0, 255, 0.5); border: 1px solid rgba(0, 0, 255, 0.75); }
<p class="pane debug_blue" style="float: left;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.
</span>
</p>
<p class="pane debug_blue" style="float: left;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.<br/>
Pane content.
</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.
</span>
</p>
<p class="pane debug_blue" style="float: left; display: inline-block; width: auto; min-height: auto;">
<span class="back debug_green"></span>
<span class="cont debug_red">
Pane content.<br/>
Pane content.
</span>
</p>
Dan inilah demo langsung dari teknik yang digunakan secara luas:
