设置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. win7 eclipse 调试storm

    windows 下eclipse开发storm 用本地模式,直接run as 运行topology解决了可以什么都不用下,直接把storm-starter的源码下下来,1.在eclipse创建一个ja ...

  2. Leetcode Substring with Concatenation of All Words

    You are given a string, S, and a list of words, L, that are all of the same length. Find all startin ...

  3. 基础知识:Q&A

    1.点乘几何意义? >0,a,b同向,=1时,方向完全相同 =0,垂直 <0,反向,=-1时,方向完全相反 2.叉乘几何意义?叉乘得到的向量的方向怎么确定? aXb ,可以得到 同时垂直于 ...

  4. C# Winform 中如何实现音乐播放和视频播放

    C#  Winform 中如何实现音乐播放和视频播放 namespace WindowsFormsApplication1 { public partial class Form2 : Form { ...

  5. Kali 2016.2版本安装vmtools实现本机与虚拟机文件复制

    Kali官方下载:http://cdimage.kali.org/kali-2016.2/kali-linux-2016.2-amd64.iso VM12 Pro下载:https://mega.nz/ ...

  6. springmvc+spring+hibernate

    web.xml <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi=" ...

  7. 使用ZIM桌面维基做笔记

    最近尝试了使用ZIM做笔记,感觉还不错 ubuntu下直接到软件中心即可安装,或者 sudo apt-get install zim windows下的到此下载http://www.glump.net ...

  8. WM_COPYDATA进程间通信方案

    连续在两个公司使用WM_COPYDATA实现进程间通信了,整理一下 具体步骤: 一.   进程A通过ShellExecute启动进程B, 将用于通信的窗口句柄hWndA(已强转为int值)通过命令行参 ...

  9. 下载更新文件后,调用安装器自动安装apk文件

    在更新操作时,下载新apk之后,往往需要自动安装新apk,用以下代码即可安装下载在本地的apk文件(apkFile) Intent intent = new Intent(); intent.setA ...

  10. strace追踪mysql执行语句

    一.strace参数 strace是Linux环境下的一款程序调试工具,用来监察一个应用程序所使用的系统调用及它所接收的系统信息.追踪程序运行时的整个生命周期,输出每一个系统调用的名字,参数,返回值和 ...