IE 8'de içerilen öğeyi etkilemeden div arka planının opaklığı?

IE 8'de bulunan öğeyi etkilemeden div'in arka planının Opaklığını ayarlamak istiyorum. Herhangi bir çözüme sahibim ve 1 X 1 .png resmine yanıt vermeyin ve dinamik opaklık kullanıyorum ve renk yöneticisi değişebileceğinden bu resmin opaklığını ayarlayın o

Bunu kullandım ama IE 8'de çalışmıyorum

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

ve

rgba(0,0,0,0.3)

Ayrıca.

opacityTarzı içindeki bütün eleman ve her şeyi etkiler. Buna doğru cevap, bunun yerine bir rgba arka plan rengi kullanmaktır.

CSS oldukça basittir:

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

... ilk üç sayı, arka plan renginiz için kırmızı, yeşil ve mavi değerler ve dördüncüsü, değerle aynı şekilde çalışan "alfa" kanal opacitydeğeridir.

Daha fazla bilgi için bu sayfaya bakın: http://css-tricks.com/rgba-browser-support/

Kötü tarafı, bunun IE8 veya daha düşük sürümlerde çalışmamasıdır. Yukarıda bağlantılandırdığım sayfa, çalışmadığı diğer birkaç tarayıcıyı da listeliyor, ancak şimdiye kadar hepsi çok eskidir; IE6 / 7/8 dışında şu anda kullanımda olan tüm tarayıcılar rgba renkleriyle çalışacaktır.

İyi haber şu ki CSS3Pie adlı bir hack kullanarak IE'yi bununla çalışmaya zorlayabilirsiniz . CSS3Pie, IE'nin eski sürümlerine rgba arka plan renkleri de dahil olmak üzere bir dizi modern CSS3 özelliği ekler.

Arka planlar için CSS3Pie kullanmak için, CSS'nize -pie-backgroundve PIE behaviorstilinize belirli bir bildirim eklemeniz gerekir , böylece stil sayfanız şu şekilde görünür:

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

Umarım yardımcı olur.

[DÜZENLE]

Değeri ne olursa olsun, başkalarının da bahsettiği gibi, anahtar kelime filterile IE'nin stilini kullanabilirsiniz gradient. CSS3Pie çözümü aslında aynı tekniği perde arkasında kullanır, ancak doğrudan IE'nin filtreleriyle uğraşma ihtiyacını ortadan kaldırır, böylece stil sayfalarınız çok daha temiz olur. (aynı zamanda bir sürü başka güzel özellik de ekler, ancak bu, bu tartışmayla ilgili değildir)

Yapmanız gereken tek şey vermek basit

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

& IE için bu filtreyi kullan

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 */

rgba filtrenizi buradan http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/ adresinden oluşturabilirsiniz

opacity üst öğe üzerinde tüm alt DOM ağacı için ayarlar

Nesiller için de kademeli olmayan belirli bir öğe için opaklığı gerçekten ayarlayamazsınız. opacityKorkarım CSS böyle çalışmıyor.

Yapabileceğiniz şey, bir kapta iki kardeş öğeye sahip olmak ve birinin konumunu şeffaf bir şekilde ayarlamaktır:

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

o zaman saydam ayarlamanız gerekir, position: absolute/relativeböylece içerik kardeşi üzerinde işlenir.

rgba renkli arka planların arka plan şeffaflığını yapabilir

rgbaelementin renk ayarı background-colorelbette işe yarar, ancak sizi yalnızca arka plan olarak rengi kullanmakla sınırlandıracaktır. Korkarım görüntü yok. Elbette CSS3 degradelerini kullanabilirsiniz, ancak içinde degrade durma renkleri sağlarsanız rgba. Bu da işe yarar.

Ancak bunun rgbagerekli tarayıcılarınız tarafından desteklenmeyebileceğini unutmayın.

Uyarı içermeyen modal iletişim kutusu işlevi

Ancak, tüm sayfayı bir tür maskelemenin peşindeyseniz, bu genellikle divbu stil kümesine ayrı bir sayfa eklenerek yapılır :

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

Daha sonra içeriği görüntülediğinizde daha yüksek olmalıdır z-index. Ancak bu iki unsurun kardeşler ya da başka bir şey açısından ilgisi yoktur. Olmaları gerektiği gibi gösterilirler. Üst üste.

İçerdiği öğede z-endeksini daha yükseğe ayarlamayı deneyin.

Peki ya bu yaklaşım:

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

Belki daha basit bir cevap vardır, koda arka plan rengi gibi istediğiniz arka plan rengini eklemeye çalışın : #fff;

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

Opaklık özelliğini mutlak dışındaki konumlarla kullandığınızda tüm alt div'leri etkiler. Bu yüzden, div'leri birbirinin içine koymamayı ve sonra div'ler için mutlak konumu kullanmamayı başarmanın başka bir yolu. Üst div için herhangi bir arka plan rengi kullanmayın.

RGBA kullanın veya kodu onaltılıysanız rgba olarak değiştirin. Bazı css presodu elemanlarına gerek yok .

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;

VEYA

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