CSS不透明只是背景颜色而不是文字呢？

我可以将opacity属性分配给div的background属性而不是其上的文本？

我试过了：

 background: #CCC; opacity: 0.6; 

但是这并不改变不透明度。

Answer 1

这听起来像你想要使用透明的背景，在这种情况下，你可以尝试使用rgba()函数：

rgba()

可以使用rgba()函数表示法在红 – 绿 – 蓝 – alpha模型（RGBa）中定义颜色。 RGBa扩展RGB颜色模型以包含alpha通道，从而允许指定颜色的不透明度。
a意味着不透明度：0 =透明; 1 =不透明;

 rgba(255,0,0,0.1) /* 10% opaque red */ rgba(255,0,0,0.4) /* 40% opaque red */ rgba(255,0,0,0.7) /* 70% opaque red */ rgba(255,0,0, 1) /* full opaque red */ 

示例用法：

 #div { background: rgb(54, 25, 25); /* Fall-back for browsers that don't support rgba */ background: rgba(54, 25, 25, .5); } 

演示

查看http://caniuse.com/#search=rgba查看浏览器的支持;

Answer 2

最简单的方法是用2个div，1个用背景，1个用text：

 #container { position: relative; width: 300px; height: 200px; } #block { background: #CCC; filter: alpha(opacity=60); /* IE */ -moz-opacity: 0.6; /* Mozilla */ opacity: 0.6; /* CSS3 */ position: absolute; top: 0; left: 0; height: 100%; width: 100%; } #text { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 

 <div id="container"> <div id="block"></div> <div id="text">Test</div> </div> 

Answer 3

这将适用于每个浏览器

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

如果您不希望透明度影响整个容器并且它是儿童，请检查此解决方法。 你必须有一个绝对定位的孩子与相对有定位的父母来实现这一目标。 http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/

查看工作演示http://www.impressivewebs.com/demo-files/css-opacity/css-opacity-demo.html

Answer 4

仅供less部分用户使用：

如果您不喜欢使用RGBA来设置颜色，而是使用HEX，则有解决scheme。

你可以使用一个mixin：

 .transparentBackgroundColorMixin(@alpha,@color) { background-color: rgba(red(@color), green(@color), blue(@color), @alpha); } 

并使用它

 .myClass { .transparentBackgroundColorMixin(0.6,#FFFFFF); } 

其实这是一个内置的LESS函数也提供了：

 .myClass { background-color: fade(#FFFFFF, 50%); } 

请参阅如何使用较less的编译器将HEX颜色转换为rgba？

Answer 5

我的窍门是创build一个透明的.png颜色和使用background:url() 。

Answer 6

我有同样的问题。 我想100％透明的背景颜色，只要使用这个代码，它的伟大工作：

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

您可以在此网页的左侧看到示例（联系表单区域）

Answer 7

一个很好的方法是使用css3。

创build一个div的宽度一个类 – 例如在你的页面顶部的超级大气：

然后设置下面的CSS属性：

  .supersizer { background: url("http://fc06.deviantart.net/fs70/f/2012/099/d/f/stackoverflow_16x16_icon_by_muntoo_stock-d4vl2v4.png") no-repeat center center fixed; width: 100%; height: 100%; position: fixed; z-index: -1; opacity: 0.5; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; top: 0; } 

 <div class="supersizer"></div> 

Answer 8

对于任何人来到这个线程，这里是一个叫做thatsNotYoChild.js的脚本，我刚刚写道，自动解决了这个问题：

http://www.impressivewebs.com/fixing-parent-child-opacity/

基本上，它将子元素与父元素分开，但将元素保留在页面上的相同物理位置。

Answer 9

最简单的解决scheme是创build3个divs 。 一个将包含其他2，透明背景和内容的一个。 使第一个div的位置相对，并将透明背景设置为负z-index ，然后调整内容的位置以适应透明背景。 这样你就不会有绝对定位的问题。

Answer 10

使用

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

这种方法可以在所有的浏览器中运行

Answer 11

你不能。 你必须有一个单独的div，就是那个背景，所以你只能将透明度应用到那个背景上。

我最近尝试了这个，因为我已经使用jQuery，我发现以下是最简单的：

1. 创build两个不同的div。 他们将是兄弟姐妹，不包含在彼此或任何东西。
2. 给text div一个坚实的背景颜色，因为那将是没有JS的默认值。
3. 使用jQuery获取text div的高度，并将其应用于background div。

我相信有一些CSS忍者的方式来做所有这些只有花车或什么的，但我没有耐心去弄明白。