Opacity background div tanpa mempengaruhi elemen yang terkandung di IE 8?

Saya ingin mengatur Opacity latar belakang div tanpa mempengaruhi elemen yang terkandung di IE 8. punya solusi apa pun dan tidak menjawab untuk mengatur gambar 1 X 1 .png dan mengatur opacity gambar itu karena saya menggunakan opacity dinamis dan admin warna dapat berubah bahwa

Saya menggunakan itu tetapi tidak bekerja di IE 8

#alpha {
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
}

dan

rgba(0,0,0,0.3)

juga.

The opacitygaya mempengaruhi seluruh elemen dan segala sesuatu di dalamnya. Jawaban yang benar untuk ini adalah dengan menggunakan warna latar belakang rgba.

CSS cukup sederhana:

.myelement {
    background: rgba(200, 54, 54, 0.5);
}

... dengan tiga angka pertama adalah nilai merah, hijau dan biru untuk warna latar belakang Anda, dan yang keempat adalah nilai saluran 'alfa', yang bekerja dengan cara yang sama seperti opacitynilainya.

Lihat halaman ini untuk info lebih lanjut: http://css-tricks.com/rgba-browser-support/

Sisi negatifnya, ini tidak berfungsi di IE8 atau lebih rendah. Halaman yang saya tautkan di atas juga mencantumkan beberapa browser lain yang tidak berfungsi, tetapi semuanya sudah sangat tua sekarang; semua browser yang digunakan saat ini kecuali IE6 / 7/8 akan bekerja dengan warna rgba.

Kabar baiknya adalah Anda dapat memaksa IE untuk bekerja dengan ini juga, menggunakan peretasan yang disebut CSS3Pie . CSS3Pie menambahkan sejumlah fitur CSS3 modern ke versi IE yang lebih lama, termasuk warna latar belakang rgba.

Untuk menggunakan CSS3Pie untuk latar belakang, Anda perlu menambahkan -pie-backgrounddeklarasi khusus ke CSS Anda, serta behaviorgaya PIE , sehingga lembar gaya Anda akan terlihat seperti ini:

.myelement {
    background: rgba(200, 54, 54, 0.5);
    -pie-background:  rgba(200, 54, 54, 0.5);
    behavior: url(PIE.htc);
}

Semoga membantu.

[EDIT]

Untuk apa nilainya, seperti yang telah disebutkan orang lain, Anda dapat menggunakan filtergaya IE , dengan gradientkata kunci. Solusi CSS3Pie sebenarnya menggunakan teknik yang sama di belakang layar, tetapi menghilangkan kebutuhan Anda untuk bermain-main secara langsung dengan filter IE, sehingga stylesheet Anda jauh lebih bersih. (itu juga menambahkan sejumlah besar fitur bagus lainnya juga, tapi itu tidak relevan dengan diskusi ini)

itu sederhana, hanya Anda yang harus memberi

background: rgba(0,0,0,0.3)

& untuk IE gunakan filter ini

background: transparent;
zoom: 1;    
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000); /* IE 6 & 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4C000000,endColorstr=#4C000000)"; /* IE8 */

Anda dapat membuat filter rgba Anda dari sini http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

opacity pada elemen induk menetapkannya untuk seluruh sub pohon DOM

Anda tidak dapat benar-benar mengatur opacity untuk elemen tertentu yang tidak akan mengalir ke turunan juga. opacityAku takutnya bukan itu cara kerja CSS .

Yang dapat Anda lakukan adalah memiliki dua elemen saudara dalam satu wadah dan menyetel pemosisian transparan:

<div id="container">
    <div id="transparent"></div>
    <div id="content"></div>
</div>

maka Anda harus menyetel transparan position: absolute/relativesehingga saudara kontennya akan dirender di atasnya.

rgba dapat melakukan transparansi latar belakang dari latar belakang berwarna

rgbapengaturan warna pada elemen background-colortentu saja akan berfungsi, tetapi itu akan membatasi Anda untuk hanya menggunakan warna sebagai latar belakang. Tak ada gambar, aku takut. Anda tentu saja dapat menggunakan gradien CSS3 meskipun jika Anda memberikan warna berhenti gradien rgba. Itu juga berhasil.

Namun perlu diketahui bahwa rgbamungkin tidak didukung oleh browser yang Anda butuhkan.

Fungsionalitas dialog modal bebas peringatan

Tetapi jika Anda mencari semacam masking seluruh halaman, ini biasanya dilakukan dengan menambahkan terpisah divdengan set gaya ini:

position: fixed;
width: 100%;
height: 100%;
z-index: 1000; /* some high enough value so it will render on top */
opacity: .5;
filter: alpha(opacity=50);

Kemudian ketika Anda menampilkan konten itu harus lebih tinggi z-index. Tetapi kedua elemen ini tidak terkait dalam hal saudara kandung atau apa pun. Mereka hanya ditampilkan sebagaimana mestinya. Satu di atas yang lain.

Coba atur indeks-z lebih tinggi pada elemen yang terkandung.

Bagaimana dengan pendekatan ini:

	<head>
	<style type="text/css">
		div.gradient {
			color: #000000;
			width: 800px;
			height: 200px;
		}
		div.gradient:after {
			background: url(SOME_BACKGROUND);
			background-size: cover;
			content:'';
			position:absolute;
			top:0;
			left:0;
			width:inherit;
			height:inherit;
			opacity:0.1;
		}
	</style>
	</head>
	<body>
		<div class="gradient">Text</div>
	</body>

Mungkin ada jawaban yang lebih sederhana, coba tambahkan warna latar belakang yang Anda suka ke kode, seperti background-color: #fff;

#alpha {
 background-color: #fff;
 opacity: 0.8;
 filter: alpha(opacity=80);
}

Ini memengaruhi div turunan keseluruhan saat Anda menggunakan fitur opasitas dengan posisi selain absolut. Jadi cara lain untuk mencapainya adalah dengan tidak menempatkan div di dalam satu sama lain dan kemudian menggunakan posisi absolute untuk div tersebut. Jangan gunakan warna latar belakang apa pun untuk div atas.

Gunakan RGBA atau jika Anda kode hex maka ubah menjadi rgba. Tidak perlu melakukan beberapa elemen presodu css.

function hexaChangeRGB(hex, alpha) {
    var r = parseInt(hex.slice(1, 3), 16),
        g = parseInt(hex.slice(3, 5), 16),
        b = parseInt(hex.slice(5, 7), 16);

    if (alpha) {
        return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
    } else {
        return "rgb(" + r + ", " + g + ", " + b + ")";
    }
}

hexaChangeRGB('#FF0000', 0.2);

css ---------

background-color: #fff;
opacity: 0.8;

ATAU

mycolor = hexaChangeRGB('#FF0000', 0.2);
document.getElementById("myP").style.background-color = mycolor;