您当前的位置:主页 > 教程合集 > Html/css网站首页Html/css

利用DIV+CSS实现元素透明的两种方法

发布时间:2016-01-27编辑:余斗阅读:(0)字号:
    在网页前端设计中,一个透明特效的应用往往可以很大地提升网页视觉效果,一般实现透明的方法是添加 opacity样式,具体实现方法代码为:

    .transparent_class {
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
      }
     
    代码注释: opacity: 0.5; 这是最重要的,因为它是CSS标准.该属性支持Firefox, Safari和 Opera。 filter:alpha(opacity=50); 这个是为IE6设的,可取值在0-100,其它三个0到1。 -moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。 -khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。 在使用opacity属性控制透明的时候,要注意透明度的继承问题:我们额外为子元素指定其他透明度也是无效的 这点很不友好,当我们需要背景透明,但是文字正常显示的时候,这个方法就不适用了,今天,余斗给出另外一个解决方案,给背景设置滤镜效果来实现透明,实现代码为:

    .transparent_class {
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3f000000',endColorstr='#3f000000');
      background-color:rgba(0, 0, 255, 0.5);
      }
     
    代码注释: enabled:可选项。布尔值(Boolean)。设置或检索滤镜是否激活。 startColorStr:可选项。字符串(String)。设置或检索色彩渐变的开始颜色和透明度。 其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 - FF 。 RR 指定红色值, GG 指定绿色值, BB 指定蓝色值,参阅 #RRGGBB 颜色单位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。 取值范围为 #FF000000 - #FFFFFFFF 。默认值为 #FF0000FF 。不透明蓝色。 EndColorStr:可选项。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅 startColorStr 属性。默认值为 #FF000000 。不透明黑色。 特性: Enabled:可读写。布尔值(Boolean)。参阅 enabled 属性。 GradientType:可读写。整数值(Integer)。设置或检索色彩渐变的方向。1:默认值。水平渐变。 0:垂直渐变。 StartColorStr:可读写。字符串(String)。参阅 startColorStr 属性。 StartColor:可读写。整数值(Integer)。设置或检索色彩渐变的开始颜色。 取值范围为 0 - 4294967295 。 0 为透明。 4294967295 为不透明白色。 EndColorStr:可读写。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅 startColorStr 属性。默认值为 #FF000000 。不透明黑色。 EndColor:可读写。整数值(Integer)。设置或检索色彩渐变的结束颜色。 取值范围为 0 - 4294967295 。 0 为透明。 4294967295 为不透明白色。当在脚本中使用此特性时,也可以用十六进制格式: 0xAARRGGBB 。 在对象的背景和内容之间显示定制的色彩层。当此效果通过转变显示时,在渐变册色彩层之上的文本程序性的初始化为透明的,当色彩渐变实现后,文本颜色会以其定义的值更新。 这样就能实现div块的背景透明而子元素不会透明,比使用opacity属性要人性化得多。 两种透明效果预览点击: DIV+CSS实现透明的两种方法预览 延伸扩展: 在全国哀悼日,各网站页面需要全部用黑白色,就可以用这个滤镜效果。为方便站点哀悼,只需要添加全站CSS 滤镜代码即可。

    html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
     
    代码注释:这段代码可以变网页为黑白,将代码加到CSS最顶端就可以实现素装。 有一些站长反馈这段css 不能生效,那是因为网站没有使用最新的网页标准协议:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     
    将网页最头部的替换为以上代码即可。 还有一些网站FLASH动画的颜色不能被CSS滤镜控制,可以在FLASH代码的和之间插入:

    html {FILTER: gray}
     
关键字词CSSdiv透明opacity
余斗余斗
  1. 转载请注明:利用DIV+CSS实现元素透明的两种方法
  2. 版权声明:本站原创文章,由发表在Html/css分类下,于2016-01-27最后更新
CSS学习之多类选择器
网页侧栏浮动固定但不遮住底部的js实现方法
手机扫一扫 随身带着看
鸿运国际手机登录首页