Html 如何在 CSS 中使 div 背景颜色透明
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11807286/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make div background color transparent in CSS
提问by Mistu4u
I'm not using CSS3. So I can't use opacityor filterattributes. Without using these attributes how can I make the background-colortransparent of a div? It should be kind of the text box example in this link. Here the text box background color is transparent. I want to make the same, but without using the above mentioned attributes.
我没有使用 CSS3。所以我不能使用opacity或filter属性。不使用这些属性如何使background-colora 透明div？它应该是此链接中的文本框示例。这里的文本框背景颜色是透明的。我想做同样的事情，但不使用上述属性。
采纳答案by Paul Fleming
Opacity gives you translucency or transparency. See an example Fiddle here.
不透明度为您提供半透明或透明度。在此处查看示例Fiddle。
-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 */
Note: these are NOT CSS3 properties
注意：这些不是 CSS3 属性
See http://css-tricks.com/snippets/css/cross-browser-opacity/
回答by Jerska
The problem with opacityis that it will also affect the content, when often you do not want this to happen.
问题opacity在于它也会影响内容，而通常您不希望这种情况发生。
If you just want your element to be transparent, it's really as easy as :
如果你只是想让你的元素是透明的，它真的很简单：
background-color: transparent;
But if you want it to be in colors, you can use:
但如果你希望它是彩色的，你可以使用：
background-color: rgba(255, 0, 0, 0.4);
Or define a background image (1pxby 1px) saved with the right alpha.
(To do so, use Gimp, Paint.Netor any other image software that allows you to do that.
Just create a new image, delete the background and put a semi-transparent color in it, then save it in png.)
或者定义一个背景图片（1pxby 1px）保存在右边alpha。
（要做到这一点，使用Gimp，Paint.Net或者其他任何图像处理软件，可以让你做到这一点。
只要创建一个新的形象，删除背景，把一个半透明的颜色，然后将它保存为PNG）。
As said by René, the best thing to do would be to mix both, with the rgbafirst and the 1pxby 1pximage as a fallback if the browser doesn't support alpha :
正如René所说，如果浏览器不支持 alpha ，最好的办法是混合使用rgbafirst 和1pxby1px图像作为后备：
background: url('img/red_transparent_background.png');
background: rgba(255, 0, 0, 0.4);
See also: http://www.w3schools.com/cssref/css_colors_legal.asp.
另请参阅：http: //www.w3schools.com/cssref/css_colors_legal.asp。
Demo: My JSFiddle
演示：我的 JSFiddle
回答by user1147171
transparentis the default for background-color
透明是背景颜色的默认值
回答by randominstanceOfLivingThing
From https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
来自https://developer.mozilla.org/en-US/docs/Web/CSS/background-color
To set 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 */
回答by user3241848
It might be a little late to the discussion but inevitably someone will stumble onto this post like I did. I found the answer I was looking for and thought I'd post my own take on it. The following JSfiddle includes how to layer .PNG's with transparency. Jerska's mention of the transparency attribute for the div's CSS was the solution: http://jsfiddle.net/jyef3fqr/
讨论可能有点晚了，但不可避免地有人会像我一样偶然发现这篇文章。我找到了我正在寻找的答案，并认为我会发表我自己的看法。以下 JSfiddle 包括如何将 .PNG 分层为透明。Jerska 提到 div 的 CSS 的透明属性是解决方案：http: //jsfiddle.net/jyef3fqr/
HTML:
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:
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:
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' });
});
And my original inspiration:http://jsfiddle.net/5g1zwLe3/I also used paint.net for creating the transparent PNG's, or rather the PNG's with transparent BG's.
和我的原始灵感：http: //jsfiddle.net/5g1zwLe3/我还使用paint.net 来创建透明的PNG，或者更确切地说是带有透明BG 的PNG。
回答by ARVIND CHAUHAN
/*Fully Opaque*/
.class-name {
opacity:1.0;
}
/*Translucent*/
.class-name {
opacity:0.5;
}
/*Transparent*/
.class-name {
opacity:0;
}
/*or you can use a transparent rgba value like this*/
.class-name{
background-color: rgba(255, 242, 0, 0.7);
}
/*Note - Opacity value can be anything between 0 to 1;
Eg(0.1,0.8)etc */
