如何在CSS中使div背景颜色透明

Question

我没有使用CSS3。所以我不能使用opacity或filter属性。没有使用这些属性，我怎样才能让background-color透明的div？它应该是这种link中的文本框示例。这里文本框的背景颜色是透明的。我想要做同样的事情，但不使用上面提到的属性。

Answer 1

不透明度为您提供了半透明或透明。请参阅示例Fiddle here。

-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 */ 

注：these are NOT CSS3 properties

见http://css-tricks.com/snippets/css/cross-browser-opacity/

Answer 2

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

如果你只是想你的元素是透明的，它真的那么容易，因为：

background-color: transparent; 

但是，如果你希望它是在颜色，你可以使用：

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

或定义一张背景图片（1px由1px）保存，右侧为alpha。
（要做到这一点，使用Gimp，Paint.Net或任何其他图像处理软件，可以让你做到这一点。
只需创建一个新的形象，删除背景，把一个半透明的颜色，然后将其保存为PNG。 ）

至于说通过René，做的最好的事情对双方都是混合，用rgba第一和1px通过1px图像作为后备，如果浏览器不支持Alpha：

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

另请参阅：http://www.w3schools.com/cssref/css_colors_legal.asp。

演示：My JSFiddle

Answer 3

透明是背景色默认

http://www.w3schools.com/cssref/pr_background-color.asp

Answer 4

这可能是一个有点晚了讨论b不可避免地会有人像我一样偶然发现这篇文章。我找到了我正在寻找的答案，并认为我会发表自己的看法。 以下JSfiddle包括如何使用透明度对.PNG进行分层。对于div的CSS透明度属性的Jerska的提到的是解决办法： 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' }); 
}); 

而且我原来的灵感：http://jsfiddle.net/5g1zwLe3/ 我也用paint.net来创建透明的PNG，或者用透明的BG来创建PNG。

Answer 5

从https://developer.mozilla.org/en-US/docs/Web/CSS/background-color

要设置背景色：

/* Hexadecimal value with color and 100% transparency*/ 
background-color: #11ffee00; /* Fully transparent */ 

/* Special keyword values */ 
background-color: transparent; 

/* HSL value with color and 100% transparency*/ 
background-color: hsla(50, 33%, 25%, 1.00); /* 100% transparent */ 

/* RGB value with color and 100% transparency*/ 
background-color: rgba(117, 190, 218, 1.0); /* 100% transparent */