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


112

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.


Anda tidak bisa melakukan ini. Opasitas properti memengaruhi semua konten elemen Anda (elemen html + teks lainnya). Tapi saya tidak mengerti mengapa Anda tidak ingin menggunakan png. Anda hanya perlu mengubah gambar bersama-sama Anda mengubah css (karena saya pikir, Anda memiliki css berbeda yang dapat dialihkan oleh admin)
Elorfin

@Corum: Betapa salahnya Anda (sama seperti saya). Itu mungkin. Lihat entri blog ini. robertnyman.com/2010/01/11/… Sangat pintar.
Robert Koritnik

Baru saja diposting di sini: < stackoverflow.com/a/11755175/1491212 > Semoga membantu Saya harap!
Armel Larcier

Jawaban:


236

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)


1
cemerlang! Ini sangat membantu saya.
Jordan Starrk

22

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/


1
Apa hubungan gradien dengan opacity? : S
Robert Koritnik

@Robert Koritnik: Lihat versi saya dari jawaban ini untuk penjelasan yang lebih baik - stackoverflow.com/questions/5160419/… juga di sini: stackoverflow.com/questions/4788564/…
tigapuluhdot

@robert, itu satu-satunya filter IE yang tersedia di web itu memberikan efek yang sama seperti yang diberikan rgba & saya bukan ahli filter.
sandeep

@Robert hanya berfungsi;) lihat tautan ini - @sandeep Saya memperbaiki kode filter untuk menambahkan bahan yang diperlukan (latar belakang transparan dan hasLayout), mengubah urutan filter .. jangan ragu untuk
memutar

1
Filter @sandeep tidak akan berfungsi tanpa hasLayout, Anda mungkin memiliki properti hasLayout lain di kode Anda, mungkin lebarnya? Saya bekerja dengan satu tangan .. mematahkan pergelangan tangan saya maka balasan saya lambat, tapi inilah jsfiddle dengan kode IE yang relevan dalam komentar bersyarat untuk perbandingan kedua metode
clairesuzy

8

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.


ini adalah jawaban yang benar, bekerja bahkan dengan bg-images
Botea Florin


1

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>


0

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

2
Itu juga mempengaruhi konten!
Germa Vinsmoke

0

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.


0

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