如何在CSS中使div背景色透明
如何在CSS中使div背景色透明
提问于 2012-08-04 16:57:45
我没有使用CSS3。所以我不能使用opacity或filter属性。如果不使用这些属性，如何使div的background-color透明？它应该类似于此link中的文本框示例。这里的文本框背景颜色是透明的。我想做同样的事情，但不使用上面提到的属性。
回答 5
Stack Overflow用户
回答已采纳
发布于 2012-08-04 17:03:23
不透明度为您提供半透明或透明。请参阅示例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/
Stack Overflow用户
发布于 2018-02-01 00:56:03
来自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 */Stack Overflow用户
发布于 2014-09-28 09:34:08
现在讨论可能有点晚了，但不可避免地会有人像我一样偶然发现这篇文章。我找到了我正在寻找的答案，我想我应该发布我自己的看法。下面的JSfiddle包含了如何对.png文件进行透明分层。Jerska提到的div的CSS的透明属性就是解决方案：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创建了透明的PNG，或者更确切地说，是带有透明BG的PNG。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11807286
复制相关文章
相似问题