我有一个名为signup-box的div元素,我希望将0.65的不透明度值应用于它,但是似乎有这样做的副作用。出于某种原因,它也适用于该div内的所有内容。例如,我的白色文本不会显示为白色,而且输入也不是白色。我能做些什么来保持透明效果而不会丢失我想保留的设计方面? http://jsfiddle.net/HKy3F/5/将不透明度应用于CSS中的元素
1
A
回答
1
这是不透明属性的行为(它适用于该元素中的所有内容)。如果您只想将不透明度应用于背景,则需要使用65%透明黑色框创建图像,或者可以使用CSS3颜色RGBA函数以65%不透明度生成黑色(不适用于IE < 9)。
background: rgba(0, 0, 0, 0.6);
Which produces this jdFiddle.希望这就是你要找的。
1
检查一下,这应该回答你的问题,使用背景rgba而不是你的盒子上的不透明度。
http://jsfiddle.net/camus/Xb5TU/
#signup-box {
height: 330px;
width: 350px;
background-color: rgba(0,0,0,0.65);
border-radius: 8px;
}
-1
您是否尝试过使用2周的div - 一个背景和一个用于内容?
在我的例子中,我有一个不透明度为65%的背景色#ffffff。
这里是CSS:
body { background:#000000 ; margin:auto ; padding:15px ; } #divA { background:#ffffff ; /* this is your background */ /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; /* IE 5-7 */ filter: alpha(opacity=65); /* Netscape */ -moz-opacity: 0.65; /* Safari 1.x */ -khtml-opacity: 0.65; /* Good browsers */ opacity: 0.65; display:block ; width:300px ; height:300px ; margin:auto ; z-index:1 ; } #divB { display:block ; /* this is where your content goes */ padding:20px ; width:250px ; height:260px ; text-align:center ; color:#C00 ; font-family:Arial, Helvetica, sans-serif ; font-size:24px ; text-align:center ; margin:auto ; z-index:5000 ; }
,这里是实现它的HTML:
‹div id="divA"› ‹div id="divB"›text goes here‹/div› ‹/div›
它工作在IE7,IE8,IE9,FF,歌剧,Safari和Chrome
祝你好运!
辛西娅
0
一个简单的方法是创建你所需要的透明小png文件并将其设置为父元素的背景。这将是所有浏览器:)
相关问题
- 1. 设置CSS中不透明度的div内元素的不透明度?
- 2. 元素的不透明度
- 3. 将不透明度应用于LinearGradientBrush
- 4. 将css不透明度应用于.png的一部分
- 5. WPF中透明的不透明元素
- 6. CSS透明度,如何在透明容器元素
- 7. CSS背景透明度不影响使用LESS的子元素
- 8. 如何更改CSS中元素的不透明度?
- 9. 不透明度采用子元素
- 10. CSS过渡:不透明度不透明。 。
- 11. jQuery应用css不透明度
- 12. 重叠具有不同不透明度的CSS元素
- 13. 如何增加HTML中不透明度的子元素的不透明度?
- 14. 不透明元素中的透明元素
- 15. <nav>元素透明,没有任何以前的不透明度/透明度调整HTML/CSS
- 16. QML - 堆叠元素的不透明度
- 17. 表格元素的JavaScript不透明度
- 18. 元素的动画不透明度
- 19. CSS - 在元素中应用不透明度但不在元素中显示文本
- 20. 将LinearGradientBrush的不透明度应用于winforms中的图像
- 21. CSS不透明度转换不影响子元素
- 22. CSS不透明度 - 不影响子元素
- 23. 父元素透明的HTML元素不会变得不透明
- 24. 不透明元素上的不透明元素
- 25. 重叠部分透明元素的不透明度
- 26. 具有不透明度的CSS元素与html5视频重叠
- 27. css悬停以改变其他元素的不透明度值
- 28. 维护CSS内部元素的不透明度
- 29. 应用不透明度而不影响子元素
- 30. 如何将透明度应用于CSS颜色变量?
http://stackoverflow.com/questions/3350579/css-element-opacity-that-does-not-affect-transparency-of-its-contents,http:// stackoverflow.com/questions/4182304/how-to-not-apply-opacity-for-child-element – c69 2012-03-11 02:14:50