我可以将不透明度属性分配给一个div的背景属性,而不是它的文本吗?

我试过了:

background: #CCC;
opacity: 0.6;

但这不会改变不透明度。


当前回答

这适用于所有浏览器

div {
    -khtml-opacity: .50;
    -moz-opacity: .50;
    -ms-filter: ”alpha(opacity=50)”;
    filter: alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
    opacity: .50;
}

如果您不希望透明度影响整个容器及其子容器,请检查此解决方案。你必须有一个绝对定位的子节点和一个相对定位的父节点才能实现这一点。不影响子元素的CSS不透明度

在CSS不透明不影响“孩子”的地方检查一个工作演示

其他回答

我也有同样的问题。我想要100%透明的背景色。只需使用这段代码;这对我来说非常有效:

rgba(54, 25, 25, .00004);

你可以在这个网页的左边(联系表单区域)看到一些例子。

最简单的解决方案是创建3个div。一个将包含另外两个,一个有透明背景,一个有内容。使第一个div的位置相对,并设置一个透明背景为负z-index,然后调整内容的位置,以适应透明背景。这样你就不会有绝对定位的问题。

这样做的一个好方法是使用CSS 3。

创建一个div宽度类-例如,在你的页面顶部的supersizer:

然后设置以下CSS属性:

.supersizer { 后台:url("http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png")无重复中心中心固定; 宽度:100%; 高度:100%; 位置:固定; z - index: 1; 透明度:0.5; -webkit-background-size:封面; -moz-background-size:封面; -o-background-size:封面; background-size:封面; 上图:0; } < div class = "超大" > < / div >

Use:

background:url("location of image"); // Use an image with opacity

此方法适用于所有浏览器。

这适用于所有浏览器

div {
    -khtml-opacity: .50;
    -moz-opacity: .50;
    -ms-filter: ”alpha(opacity=50)”;
    filter: alpha(opacity=50);
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
    opacity: .50;
}

如果您不希望透明度影响整个容器及其子容器,请检查此解决方案。你必须有一个绝对定位的子节点和一个相对定位的父节点才能实现这一点。不影响子元素的CSS不透明度

在CSS不透明不影响“孩子”的地方检查一个工作演示