设置div的背景为半透明,下面有个不错示例,使用div+css来实现下,不会的朋友可以参考下

div{filter:alpha(Opacity=80);-moz-opacity:0.5;opacity: 0.5;}

说明: 
1、filter:对win IE设置半透明滤镜效果,filter:alpha(Opacity=80)代表该对象80%半透明,火狐浏览器不认 
2、-moz-opacity:对mozilla firefox火狐浏览器实现半透明,win IE不认此属性,-moz-opacity:0.5相当于设置半透明为50% 
3、opacity:对除IE外所有浏览器支持包括谷歌,放最后主要针对谷歌浏览器,opacity: 0.5;表示设置50%半透明

为了观察到对DIV半透明实现,我们设置两个DIV层,分别一个放于另外一个DIV层内,外层DIV命名为“.div-a”;上面被包含的层CSS类命名为“.div-b”,形成“.div-b”盒子放于“.div-a”内

我们对底层DIV设置一个背景是一张图片,上面的DIV盒子设置村黑色。

使用css让div半透明的更多相关文章

  1. css 设置div半透明 悬浮在页面底部 不随滚动条滚动

    .action-button { width: 100%; background:rgba(0,0,0,0.7); position:fixed; bottom:; left:; z-index:; ...

  2. CSS实现文字半透明显示在图片上方法

    CSS实现文字半透明显示在图片上方法 在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了,下面来看两个文字显示在图片上并且半透明的例子. CSS让一行文字显示在 ...

  3. CSS之div和span标签

    div和span是非常重要的标签,div的语义是division"分割": span的语义就是span"范围.跨度". 这两个东西,都是最最重要的"盒 ...

  4. css实现div的高度填满剩余空间

    css实现div的高度填满剩余空间 .top{ width: 100%; height: 70px;} .bottom{background-color: #cc85d9;width: 100%;po ...

  5. html中css、div命名规范

    html中css.div命名规范 1.类class的命名规范示例 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column ...

  6. CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容

    CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容,DiV透明其实挺简单,主要是为background定义opacity属性,一般这个是最大值是1,数值越接近1,则越不透明 ...

  7. CSS实现div居中

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. css与div小结

    前些时间学习css与div的课程 什么是css呢 Css 级联样式表或层叠样式表(Cascading Style Sheet) 是能够真正做到 网页表现与内容分离的一种样式设计语言.相对于传统HTML ...

  9. css让div水平垂直居中

    示例1: .div1{ width:200px; height:300px; border:1px solid #000; position: relative; } .div2{ width: 40 ...

随机推荐

  1. NOIP2008 ISBN号码(一桶水)【A005】

    [A005]NOIP2008 ISBN号码(一大桶水)[难度A]———————————————————————————————————————————————————————————————————— ...

  2. H5移动前端开发常用高能css3汇总

    1.禁止a标签点击高亮,这些都是非官方属性,但实用性超强 html,body{ -webkit-touch-callout: none; //禁止或显示系统默认菜单 -webkit-user-sele ...

  3. mysql like 贪婪匹配 同时匹配多个值

    LIKE "%a%b%c%",这样匹配出的就是包含a,b,c三个关键词的记录  (三个关键词不在一起时) 不好用 mysql> select count(1) from dm ...

  4. 错误信息:attempt to create saveOrUpdate event with null entity

    错误信息:attempt to create saveOrUpdate event with null entity; 这个错误网上答案比较多,我也不多说了. 我遇到的问题是在前台传过来的参数是nul ...

  5. 【整理】强化学习与MDP

    [入门,来自wiki] 强化学习是机器学习中的一个领域,强调如何基于环境而行动,以取得最大化的预期利益.其灵感来源于心理学中的行为主义理论,即有机体如何在环境给予的奖励或惩罚的刺激下,逐步形成对刺激的 ...

  6. Java学习路线

    总体思路:由表及里,勤于实践,纵横交错,融会贯通 Java语言----->JDK----->Java虚拟机原理----->编译原理----->操作系统原理----->计算 ...

  7. 在Ubuntu16.04集群上手工部署Kubernetes(未完,陆续补充中)

    主机信息 主机 IP OS k8s-master 10.10.10.20192.168.0.20 Ubuntu Server 16.04 k8s-node1 10.10.10.21192.168.0. ...

  8. Java 同步代码块 - Synchronized Blocks

    java锁实现原理: http://blog.csdn.net/endlu/article/details/51249156 The synchronized keyword can be used ...

  9. JS学习总结(新手)

    1. JS面向对象 http://www.cnblogs.com/JavascriptDream/p/5064976.html a. Prototype 属性的理解 b. 遗传继承函数 functio ...

  10. iOS应用程序生命周期(前后台切换,应用的各种状态)详解

    http://blog.csdn.net/totogo2010/article/details/8048652/