Непрозорість фону div, не впливаючи на вміщений елемент в IE 8?

Я хочу встановити непрозорість фону div, не впливаючи на елемент, що міститься в IE 8., будь-яке рішення і не відповідати на встановлення зображення 1 X 1 .png та встановити непрозорість цього зображення, оскільки я використовую динамічну непрозорість, і адміністратор кольорів може змінюватися що

Я використовував це, але не працював в IE 8

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

і

rgba(0,0,0,0.3)

також.

The opacityСтиль впливає на весь елемент , і все в ньому. Правильна відповідь на це - замість цього використовувати колір фону rgba.

CSS досить простий:

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

... де перші три числа - це червоне, зелене та синє значення для вашого фону фону, а четверте - значення "альфа" каналу, яке працює так само, як і opacity значення.

Дивіться цю сторінку для отримання додаткової інформації: http://css-tricks.com/rgba-browser-support/

Недостатня сторона полягає в тому, що це не працює в IE8 або нижче. Сторінка, яку я пов’язувала вище, також містить декілька інших веб-переглядачів, у яких вона не працює, але вони всі вже старі; всі веб-переглядачі в поточному використанні, крім IE6 / 7/8, будуть працювати з rgba кольорами.

Хороша новина полягає в тому, що ви можете змусити IE працювати і з цим, використовуючи хак під назвою CSS3Pie . CSS3Pie додає низку сучасних функцій CSS3 до старих версій IE, включаючи кольори тла rgba.

Щоб використовувати CSS3Pie для тла, вам потрібно додати певну -pie-backgroundдекларацію до CSS, а також behaviorстиль PIE , щоб ваш таблиця стилів виглядала так:

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

Сподіваюся, що це допомагає.

[EDIT]

Для чого варто, як уже згадували інші, ви можете використовувати filterстиль IE із gradientключовим словом. Рішення CSS3Pie фактично використовує цю саму техніку за кадром, але позбавляє вас від необхідності возитися безпосередньо з фільтрами IE, тому ваші таблиці стилів набагато чистіші. (це також додає цілу купу інших приємних функцій, але це не стосується цієї дискусії)

це просто, що ти маєш лише дати

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

& для IE використовуйте цей фільтр

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 звідси http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/

opacity на батьківському елементі встановлює його для всього піддоменного дерева DOM

Ви дійсно не можете встановити непрозорість для певного елемента, який також не каскадується нащадкам. opacityБоюся, це не так, як працює CSS .

Що ви можете зробити, це мати два елемента брати в одному контейнері та встановити прозоре розташування:

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

тоді ви повинні встановити прозорість, position: absolute/relativeщоб його вміст побратимів над ним відображався.

rgba можна зробити прозору фоном кольорові фони

rgbaНалаштування кольору за background-colorбажанням елемента, звичайно, спрацює, але воно обмежить використання кольором лише як фону. Ніяких образів я не боюся. Звичайно, ви можете використовувати градієнти CSS3, хоча якщо ви надаєте кольори зупинки градієнта в rgba. Це також працює.

Але майте на увазі, що rgbaпотрібні веб-переглядачі не підтримуються.

Модальний діалоговий діалог без попередження

Але якщо ви хочете якось замаскувати всю сторінку, це зазвичай робиться шляхом додавання окремого divз цим набором стилів:

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

Тоді, коли ви показуєте вміст, він повинен мати більше z-index. Але ці два елементи не пов'язані з точки зору братів і сестер або чогось іншого. Вони просто відображаються як слід. Один над іншим.

Спробуйте встановити z-індекс на елементі, що міститься.

Як щодо цього підходу:

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

Можливо, є простіша відповідь, спробуйте додати до коду будь-який колір фону, який вам подобається, наприклад, background-color: #fff;

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

Це впливає на цілі дочірні діви, коли ви використовуєте функцію непрозорості з позиціями, відмінними від абсолютних. Тож ще один спосіб досягти цього - не ставити діви всередину один одного, а потім використовувати абсолютне положення для дівок. Не використовуйте жодного кольору фону для верхнього розділу.

Використовуйте RGBA або якщо ви шістнадцятковий код, то змініть його на rgba. Не потрібно робити якийсь елемент cod 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;

АБО

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