css透明度兼容360浏览器~~求大神

html-css012

css透明度兼容360浏览器~~求大神,第1张

首先确定你电脑上的IE版本。360是基于电脑版本的IE

其次,你的问题没有说清楚是图片透明,还是代码透明兼容

如图片的是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

}

你自己试验一下,如有疑问请留言~