有没有办法让一个div HTML元素变成半透明的?
9w11ddsr1#
使用CSS,这是跨浏览器解决方案
div { opacity: 0.5; filter: alpha(opacity = 0.5); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5); }
字符串注意:现在在每一个浏览器中,你只需要opacity,参见CanIUse。它甚至在IE9中也可以工作。
opacity
jum4pzuy2#
这将适用于所有浏览器
div { -khtml-opacity:.50; -moz-opacity:.50; -ms-filter:”alpha(opacity=50)”; filter:alpha(opacity=50); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5); opacity:.50; }
字符串如果您不希望透明度影响整个容器及其子容器,请检查此解决方法http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/
qzlgjiam3#
使用一个背景PNG文件,这是半透明的,并希望你不必支持IE6?
p4rjhz4m4#
如果你只想要div的background是半透明的,而不是里面的任何文本和元素,你可以简单地将background-color设置为一个半透明的(即alpha < 1)。一个例子是our website,这里是一个最小化的例子:
<html> <head> <title>Transparency test</title> <style type="text/css"> body { background-image: url(http://www.fencing-game.de/style/background6.png); } #trans { background-color: rgba(255,0,0,0.5); max-width: 80ex; } p { max-width: 70ex; margin: auto; } #nontrans { background-color: rgb(255,255, 0); } </style> </head> <body> <div id="trans"> <p>normal text</p> <p id="nontrans">nontransparent</p> <p>normal text</p> </div> </body>
字符串
4条答案
按热度按时间9w11ddsr1#
使用CSS,这是跨浏览器解决方案
字符串
注意:现在在每一个浏览器中,你只需要
opacity
,参见CanIUse。它甚至在IE9中也可以工作。jum4pzuy2#
这将适用于所有浏览器
字符串
如果您不希望透明度影响整个容器及其子容器,请检查此解决方法http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/
qzlgjiam3#
使用一个背景PNG文件,这是半透明的,并希望你不必支持IE6?
p4rjhz4m4#
如果你只想要div的background是半透明的,而不是里面的任何文本和元素,你可以简单地将background-color设置为一个半透明的(即alpha < 1)。
一个例子是our website,这里是一个最小化的例子:
字符串