如何使CSS背景颜色透明

我没有使用CSS3。 所以我不能使用opacityfilter属性。 没有使用这些属性,我怎样才能使background-color透明的一个div ? 它应该是这个链接中的文本框示例。 这里的文本框背景颜色是透明的。 我想做一样的,但没有使用上面提到的属性。

不透明给你半透明或透明度。 在这里看到一个例子小提琴 。

 -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */ filter: alpha(opacity=50); /* IE 5-7 */ -moz-opacity: 0.5; /* Netscape */ -khtml-opacity: 0.5; /* Safari 1.x */ opacity: 0.5; /* Good browsers */ 

注意: 这些不是CSS3属性

请参阅http://css-tricks.com/snippets/css/cross-browser-opacity/

opacity的问题是,它也会影响内容,常常不希望发生这种情况。

如果你只是想要你的元素是透明的,那么它就像下面这样简单:

 background-color: transparent; 

但如果你想要它的颜色,你可以使用:

 background-color: rgba(255, 0, 0, 0.4); 

或定义一个背景图像( 1px1px )保存与正确的alpha
(要这样做,请使用GimpPaint.Net或任何其他图像软件,以使您可以这样做。
只要创build一个新的图像,删除背景,并把一个半透明的颜色,然后保存在PNG。)

正如René所说,如果浏览器不支持alpha,最好的办法是将两者混合,首先使用rgba然后使用1px的图像作为后备。

 background: url('img/red_transparent_background.png'); background: rgba(255, 0, 0, 0.4); 

另见 : http : //www.w3schools.com/cssref/css_colors_legal.asp 。

演示 : 我的JSFiddle

讨论可能有点晚,但是不可避免地有人像我一样绊倒了这个post。 我find了我正在寻找的答案,并认为我会发表自己的看法。 以下JSfiddle包含了如何将.PNG的图层透明化。 Jerska提到div的CSS的透明属性是解决scheme: http : //jsfiddle.net/jyef3fqr/

HTML:

  <button id="toggle-box">toggle</button> <div id="box" style="display:none;" ><img src="x"></div> <button id="toggle-box2">toggle</button> <div id="box2" style="display:none;"><img src="xx"></div> <button id="toggle-box3">toggle</button> <div id="box3" style="display:none;" ><img src="xxx"></div> 

CSS:

 #box { background-color: #ffffff; height:400px; width: 1200px; position: absolute; top:30px; z-index:1; } #box2 { background-color: #ffffff; height:400px; width: 1200px; position: absolute; top:30px; z-index:2; background-color : transparent; } #box3 { background-color: #ffffff; height:400px; width: 1200px; position: absolute; top:30px; z-index:2; background-color : transparent; } body {background-color:#c0c0c0; } 

JS:

 $('#toggle-box').click().toggle(function() { $('#box').animate({ width: 'show' }); }, function() { $('#box').animate({ width: 'hide' }); }); $('#toggle-box2').click().toggle(function() { $('#box2').animate({ width: 'show' }); }, function() { $('#box2').animate({ width: 'hide' }); }); $('#toggle-box3').click().toggle(function() { $('#box3').animate({ width: 'show' }); }, function() { $('#box3').animate({ width: 'hide' }); }); 

和我的原始灵感:我也使用paint.net创build透明PNG的,或者更确切地说PNG的透明BG。