其次,你的问题没有说清楚是图片透明,还是代码透明兼容
如图片的是png半透明
代码的是滤镜透明
最后,如果是图片透明,非平铺的png透明不需要JS。
background:url(../images/logo.png) no-repeat//兼容非IE6浏览器
_background:none_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/templates/default/images/logo.png)//兼容IE6浏览器
而平铺的半透明png图片 如果是颜色渐变,无图片等也可以使用CSS3和滤镜实现全兼容。有图片的就只有使用JS了。
<html>
<head><title>图片,透明层,文字</title>
<style>
#box1{
float:left/*浮动定位和相对定位都可以,我这里用的是浮动定位。*/
width:20%
height:15em
margin-left:3%
margin-top:3%
}
#box2{
float:left/*浮动定位和相对定位都可以,我这里用的是浮动定位。*/
width:100%
height:100%
border:1px solid black/*给图片做个边框*/
overflow:hidden/*不准溢出来,做动画效果的时候可能会溢出来,溢出来的部分隐藏起来。*/
}
#picimg{
float:left/*浮动定位和相对定位都可以,我这里用的是浮动定位。*/
width:100%
height:100%
}
#touming{
position:relative/*这个透明层尽量用相对定位,这样不会跑来跑去,原因目前还不怎么清楚,反正相对ok*/
clear:both/*清除浮动效果,避免到时候到处乱跑,比如做了过渡动画的时候。*/
width:100%
height:1.5em
top:-13.5em
background:gray
filter:alpha(Opacity=30)/*设置透明效果30*/
-moz-opacity:0.3/*设置透明效果0.3*/
opacity: 0.3/*设置透明效果0.3*/
left:0/*距离box1距离是0,实际上距离box2的距离也是0*/
}
#words{
position:relative/*这里用相对定位*/
clear:both/*清除浮动,这个很有必要,不清除浮动会到处乱跑的。*/
width:100%/*相对于box1的宽度,实际上也等于box2的宽度*/
height:2em
color:red/*设置文字颜色为红色,你自己喜欢什么颜色就弄什么颜色,我比较喜欢红色。*/
top:-15em/设置成负的,把文字提到box2上面去/
left:0/*相对于box1,左边距离设置成0*/
text-align:center
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">
<img id="picimg" src="https://www.baidu.com/img/bd_logo1.png">
</div>
<div id="touming"></div>
<div id="words">这里是要显示的文字</div>
</div>
</body>
</html>
效果图:
效果还不错,透明层有透明效果,文字可以正常显示出来。这个方法还行吧,哈哈。我还会用三个div画一个心形,好看得很哟!!@
PNG图片不是透明~,可是在IE6下却不能正确显示透明部分,使用这个css可以解决这个问题(还有其他方法,不过百度空间只能用css~_~)filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="png图片地址",sizingMethod='crop')
把上面的加在css中。
例如
#in_send form td.f14 input {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://cuiwei131.814e.com/5.png",sizingMethod='crop')
height:64px
width:64px
padding-top:120px
font-size:1px
border-right: #111 0px solid
border-bottom: #111 0px solid
border-top:#111 0px solid
border-left:#111 0px solid
margin-left:203px
margin-top:-144px
position: absolute
}
你自己试验一下,如有疑问请留言~