css透明效果代码结构,用CSS实现背景半透明效果的方法实现_css

如何用css实现背景半透明效果？做过活动页面的同学可能会遇到要做背景半透明的效果，我们一般的做法是用两个层，一个用于放文字，另一个用于做透明背景，因为透明滤镜的效果会影响到里面的内容。不过如果你只需求在IE下实现，我们有更简单的做法：

背景为红色(#FF0000)，透明度20%。

CSS代码：

.alpha1{

width:300px;

height:200px;

background-color:#FF0000;

filter: Alpha(Opacity=30);

}

.ap2{

position:relative;

}

这样基本就可以实现啦，也不用担心定位和自适应问题，最大的问题是仅IE支持。

如果兼容FF、OP怎么写呢？首先，上面这种定法是不行的啦，那就只能用两个层重叠的方法啦。

改下页面结构与CSS样式：

HTML代码：

背景为红色(#FF0000)，透明度20%。

CSS代码：

.alpha1,.alpha2{

width:100%;

height:auto;

min-height:250px;/* 必需 */

_height:250px;/* 必需 */

overflow:hidden;

background-color:#FF0000;/* 背景色 */

}

.alpha1{

filter:alpha(opacity=20); /* IE 透明度20% */

}

.alpha2{

background-color:#FFFFFF;

-moz-opacity:0.8; /* Moz + FF 透明度20%*/

opacity: 0.8; /* 支持CSS3的浏览器(FF 1.5也支持)透明度20%*/

}

.ap2{

position:absolute;

}

欢迎大家阅读《用CSS实现背景半透明效果的方法实现_css》,跪求各位点评,若觉得好的话请收藏本文，by 搞代码

搞代码网(gaodaima.com)提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权

转载请注明原文链接：用CSS实现背景半透明效果的方法实现_css