首页 相关文章 用CSS实现背景半透明效果的方法实现

用CSS实现背景半透明效果的方法实现

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

  HTML代码:

div class="alpha1"
 div class="ap2"
   p背景为红色(#FF0000),透明度20%。/p
 /div
/div

  CSS代码:

.alpha1{
  width:300px;
  height:200px;
  background-color:#FF0000;
  filter: Alpha(Opacity=30);
}
.ap2{
  position:relative;
}

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

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

  改下页面结构与CSS样式:

  HTML代码:

d...[ 查看全文 ]

2016-02-19 标签:

用CSS实现背景半透明效果的方法实现的相关文章

手机页面
收藏网站 回到头部