Nieprzezroczystość tła div bez wpływu na element zawarty w IE 8?

Chcę ustawić Krycie tła div bez wpływu na element zawarty w IE 8. Mam jakieś rozwiązanie i nie odpowiadam na ustawienie obrazu 1 X 1 .png i ustawienie krycia tego obrazu, ponieważ używam dynamicznego krycia i administratora kolorów może zmienić że

Użyłem tego, ale nie działałem w IE 8

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

i

rgba(0,0,0,0.3)

również.

opacityStyl wpływa na cały element, i wszystko, co w jego obrębie. Prawidłową odpowiedzią na to jest użycie zamiast tego koloru tła rgba.

CSS jest dość prosty:

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

... gdzie pierwsze trzy liczby to wartości czerwonego, zielonego i niebieskiego koloru tła, a czwarta to wartość kanału „alfa”, która działa tak samo jak opacitywartość.

Zobacz tę stronę, aby uzyskać więcej informacji: http://css-tricks.com/rgba-browser-support/

Wadą jest to, że nie działa to w IE8 lub niższych. Strona, do której utworzyłem łącze powyżej, zawiera również listę kilku innych przeglądarek, w których nie działa, ale wszystkie są już bardzo stare; wszystkie obecnie używane przeglądarki oprócz IE6 / 7/8 będą działały z kolorami rgba.

Dobra wiadomość jest taka, że ​​możesz zmusić IE do pracy z tym, używając hacka o nazwie CSS3Pie . CSS3Pie dodaje wiele nowoczesnych funkcji CSS3 do starszych wersji IE, w tym kolory tła rgba.

Aby użyć CSS3Pie jako tła, musisz dodać określoną -pie-backgrounddeklarację do swojego CSS, a także behaviorstyl PIE , aby Twój arkusz stylów wyglądał tak:

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

Mam nadzieję, że to pomoże.

[EDYTOWAĆ]

Co jest warte, jak wspominali inni, możesz użyć filterstylu IE ze gradientsłowem kluczowym. Rozwiązanie CSS3Pie faktycznie wykorzystuje tę samą technikę za kulisami, ale eliminuje potrzebę bezpośredniego majstrowania przy filtrach IE, dzięki czemu arkusze stylów są znacznie czystsze. (dodaje też całą masę innych fajnych funkcji, ale nie ma to znaczenia w tej dyskusji)

to proste, tylko musisz dać

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

& dla IE użyj tego filtra

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

możesz wygenerować swój filtr rgba tutaj http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

opacity element nadrzędny ustawia go dla całego subdrzewa DOM

Nie możesz tak naprawdę ustawić krycia dla określonego elementu, który nie byłby również kaskadowany do elementów podrzędnych. opacityObawiam się, że nie tak działa CSS .

To, co możesz zrobić, to mieć dwa elementy rodzeństwa w jednym pojemniku i ustawić przezroczyste położenie:

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

wtedy musisz ustawić przezroczystość, position: absolute/relativeaby jego odpowiednik zawartości był nad nim renderowany.

rgba może zrobić przezroczystość tła kolorowego tła

rgbaustawienie koloru na background-colorwoli elementu oczywiście działa, ale ogranicza cię do używania koloru tylko jako tła. Brak obrazów, obawiam się. Możesz oczywiście użyć gradientów CSS3, jeśli zapewnisz kolory stop gradientu w rgba. To też działa.

Należy jednak pamiętać, że rgbamoże to nie być obsługiwane przez wymagane przeglądarki.

Modalne okno dialogowe bez alertów

Ale jeśli chcesz zamaskować całą stronę, zwykle robi się to przez dodanie osobnego divz tym zestawem stylów:

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

Następnie, gdy wyświetlasz zawartość, powinna mieć wyższą z-index. Ale te dwa elementy nie są ze sobą powiązane pod względem rodzeństwa ani niczego. Są po prostu wyświetlane tak, jak powinny. Jeden na drugim.

Spróbuj ustawić indeks z wyżej zawartego elementu.

A co z tym podejściem:

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

Może istnieje prostsza odpowiedź, spróbuj dodać dowolny kolor tła do kodu, na przykład kolor tła: #fff;

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

Jeśli używasz funkcji krycia z pozycjami innymi niż bezwzględne, ma to wpływ na całe podrzędne elementy DIV. Innym sposobem na osiągnięcie tego jest nie umieszczanie elementów div wewnątrz siebie, a następnie używanie pozycji absolutnej dla elementów div. Nie używaj żadnego koloru tła dla górnej części DIV.

Użyj RGBA lub, jeśli masz kod szesnastkowy, zmień go na rgba. Nie ma potrzeby tworzenia css elementu presodu .

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;

LUB

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