在不影响IE 8中包含元素的情况下，div背景的不透明度？

112

我想设置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  internet-explorer-8  opacity 
— 戈文德·马尔维娅
source
你做不到 属性opacity影响元素的所有内容（其他html元素+文本）。但是我不明白为什么你不想使用png。您只需要一起更改图像就可以更改css（因为我认为，您可以通过管理员切换其他css）
— Elorfin 2011年
@Corum：你错了（和我一样多）。有可能的。查看此博客文章。robertnyman.com/2010/01/11/…极其聪明。
— 罗伯特·科里特尼克
刚刚在这里发布：< stackoverflow.com/a/11755175/1491212 >希望对我有所帮助！
— Armel Larcier 2012年

Answers:

236

该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颜色。

好消息是，您可以使用称为CSS3Pie的黑客强制IE也与此一起工作。CSS3Pie在IE的较旧版本中添加了许多现代CSS3功能，包括rgba背景色。

要将CSS3Pie用作背景，您需要向-pie-backgroundCSS 添加特定的声明以及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的过滤器，因此样式表更加简洁。（它也添加了很多其他不错的功能，但这与本讨论无关）

— 斯普德利
source
1
辉煌！这对我有很大帮助。
— 约旦·斯塔克
22

很简单，只有你要做的就是付出

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

您可以从此处http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/生成rgba过滤器

— Sandeep
source
1
渐变与不透明度有什么关系？：S
— Robert Koritnik
- ：@Robert Koritnik见我的版本这个答案的一个更好的解释stackoverflow.com/questions/5160419/...：这里也stackoverflow.com/questions/4788564/...
— thirtydot
@robert，这是唯一可在Web上使用的IE过滤器，其效果与rgba所提供的效果相同，我也不是过滤器专家。
— sandeep
@Robert可以正常工作;）看到此链接 -@sandeep我修复了过滤器代码以添加必要的成分（透明背景和hasLayout），更改了过滤器顺序..如果您不同意，请随时回滚;）
— clairesuzy
1
如果没有hasLayout，@ sandeep过滤器将无法使用，您的代码中可能还有另一个hasLayout属性，宽度可能是吗？我正在单手操作。.因此，我的手腕刹车了，因此我的回答很慢，但这是jsfiddle与相关IE代码的条件注释，用于比较这两种方法
— clairesuzy 2011年
8

opacity 在父元素上将其设置为整个子DOM树

您不能真正为某些元素设置不透明度，这些元素也不会级联到后代。opacity恐怕CSS并不是这样工作的。

您可以做的是在一个容器中有两个同级元素，并设置透明的位置：

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

那么您必须将其设置为透明，position: absolute/relative以便其内容同级在其上呈现。

rgba 可以做彩色背景的背景透明

rgbabackground-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。但是，这两个要素在兄弟姐妹或任何事物上都没有关系。它们只是按原样显示。一个接一个。

— 罗伯特·科里特尼克
source
这是正确的答案，甚至可以处理bg图像
— Botea Florin 19'Aug
1

那么这种方法呢：

	<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>
展开摘要

— 丹尼尔
source
0

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

#alpha {
 background-color: #fff;
 opacity: 0.8;
 filter: alpha(opacity=80);
}
— 米格尔·安赫尔·德拉玛塔
source
2
它也影响内容！
— Germa Vinsmoke
0

当您将不透明度功能用于绝对位置以外的位置时，它会影响整个子div。因此，实现此目标的另一种方法是不将div相互放置，然后将绝对位置用于div。不要将任何背景颜色用作上层div。

— 阿明·法拉·萨达（Armin Farah Al-Saada）
source
0

使用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;
— 加延德·辛格（Gajender Singh）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.