css div背景的不透明性不影响IE 8中包含的元素？

1rhkuytd 于 2022-12-27 发布在其他

关注(0)|答案(8)|浏览(119)

我想设置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)

也是。

css

来源：https://stackoverflow.com/questions/5662178/opacity-of-divs-background-without-affecting-contained-element-in-ie-8

8条答案

按热度按时间

yqlxgs2m1#

opacity样式影响整个元素以及其中的所有内容，正确的答案是使用rgba背景色。
CSS相当简单：

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

...其中前三个数字是背景颜色的红色、绿色和蓝色值，第四个是"alpha"通道值，其工作方式与opacity值相同。
查看此页面了解更多信息：http://css-tricks.com/rgba-browser-support/
缺点是它不能在IE8或更低版本中工作，我上面链接的页面也列出了一些其他的浏览器不能工作，但它们现在都很老了;除IE6/7/8外，当前使用的所有浏览器都可以使用rgba颜色。
好消息是，你可以强迫IE也使用这个，使用一个叫CSS3Pie的黑客。CSS3Pie在旧版本的IE上增加了一些现代的CSS3特性，包括rgba背景色。
要将CSS3Pie用于背景，需要向CSS添加特定的-pie-background声明以及PIE behavior样式，因此样式表最终将如下所示：

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

[编辑]
值得一提的是，正如其他人所提到的，你可以使用IE的filter样式，带有gradient关键字。CSS3Pie解决方案实际上在幕后使用了同样的技术，但不需要你直接使用IE的过滤器，所以你的样式表更干净。（它还添加了一大堆其他的好特性，但这与本文的讨论无关）

赞(0）回复(0）举报 2022-12-27

v440hwme2#

很简单你要做就是给予

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

对于IE使用此过滤器（& F）

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/

赞(0）回复(0）举报 2022-12-27

2mbi3lxu3#

父元素上的### opacity为整个子DOM树设置它
你不能真的为某个元素设置不透明度，因为它不会级联到后代。恐怕这不是CSS opacity的工作方式。
你可以做的是在一个容器中放置两个兄弟元素，并将其中一个元素的位置设置为透明：

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

则必须设置透明position: absolute/relative，以便其内容兄弟将在其上呈现。

`rgba`可以对彩色背景进行背景透明

元素background-color的rgba颜色设置当然可以，但是它会限制你只能使用颜色作为背景。恐怕没有图像。当然，如果你在rgba中提供渐变停止颜色，你可以使用CSS3渐变。这也可以。
但请注意，您所需的浏览器可能不支持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，但是这两个元素在兄弟或任何方面都没有关系，它们只是按照它们应该的样子显示，一个在另一个之上。

赞(0）回复(0）举报 2022-12-27

9gm1akwq4#

尝试在包含的元素上设置更高的z-index。

赞(0）回复(0）举报 2022-12-27

r7s23pms5#

这个方法怎么样：

<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）回复(0）举报 2022-12-27

8ulbf1ek6#

当你使用非绝对位置的不透明特性时，它会影响整个子div。所以另一种实现方法是不要把div放在彼此里面，然后对div使用绝对位置。不要对上div使用任何背景颜色。

赞(0）回复(0）举报 2022-12-27

eqqqjvef7#

也许有一个更简单的答案，尝试添加任何你喜欢的背景颜色的代码，如background-color：#fff;

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

赞(0）回复(0）举报 2022-12-27

pu82cl6c8#

使用RGBA，或者如果你是十六进制代码，那么就把它改成RGBA。不需要做一些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;

或

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

赞(0）回复(0）举报 2022-12-27

我来回答

css div背景的不透明性不影响IE 8中包含的元素？

8条答案

`rgba`可以对彩色背景进行背景透明

* 无警报 * 模式对话框功能

相关问题

热门标签

最新问答

css div背景的不透明性不影响IE 8中包含的元素？

8条答案

rgba可以对彩色背景进行背景透明

* 无警报 * 模式对话框功能

相关问题

热门标签

最新问答

`rgba`可以对彩色背景进行背景透明