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

我可以将opacity属性分配给divbackground属性而不是其上的文本?

我试过了:

 background: #CCC; opacity: 0.6; 

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

这听起来像你想要使用透明的背景,在这种情况下,你可以尝试使用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查看浏览器的支持

最简单的方法是用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> 

这将适用于每个浏览器

 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

仅供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?

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

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

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

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

一个很好的方法是使用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> 

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

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

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

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

使用

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

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

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

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

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

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