如何使CSS背景颜色透明
我没有使用CSS3。 所以我不能使用opacity或filter属性。 没有使用这些属性，我怎样才能使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);
或定义一个背景图像（ 1px乘1px ）保存与正确的alpha 。
（要这样做，请使用Gimp ， Paint.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。
