Непрозрачность фона 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)

также.

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

Надеюсь, это поможет.

[РЕДАКТИРОВАТЬ]

Как уже упоминалось, вы можете использовать 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);
}

Это влияет на все дочерние блоки div, когда вы используете функцию непрозрачности с позициями, отличными от абсолютных. Итак, еще один способ добиться этого - не помещать div друг в друга, а затем использовать абсолютную позицию для div. Не используйте цвет фона для верхнего блока div.

Используйте RGBA или, если вы шестнадцатеричный код, измените его на rgba. Не нужно делать какие-то предварительные элементы 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;

ИЛИ

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