使用css让div半透明
设置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半透明的更多相关文章
- css 设置div半透明 悬浮在页面底部 不随滚动条滚动
.action-button { width: 100%; background:rgba(0,0,0,0.7); position:fixed; bottom:; left:; z-index:; ...
- CSS实现文字半透明显示在图片上方法
CSS实现文字半透明显示在图片上方法 在css中文字半透明我们会需要使用滤镜效果也就是css中的filter:alpha来实现了,下面来看两个文字显示在图片上并且半透明的例子. CSS让一行文字显示在 ...
- CSS之div和span标签
div和span是非常重要的标签,div的语义是division"分割": span的语义就是span"范围.跨度". 这两个东西,都是最最重要的"盒 ...
- css实现div的高度填满剩余空间
css实现div的高度填满剩余空间 .top{ width: 100%; height: 70px;} .bottom{background-color: #cc85d9;width: 100%;po ...
- html中css、div命名规范
html中css.div命名规范 1.类class的命名规范示例 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column ...
- CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容
CSS实现Div透明,而显示在上面的文字不透明,但也可看到显示在下面的图片内容,DiV透明其实挺简单,主要是为background定义opacity属性,一般这个是最大值是1,数值越接近1,则越不透明 ...
- CSS实现div居中
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- css与div小结
前些时间学习css与div的课程 什么是css呢 Css 级联样式表或层叠样式表(Cascading Style Sheet) 是能够真正做到 网页表现与内容分离的一种样式设计语言.相对于传统HTML ...
- css让div水平垂直居中
示例1: .div1{ width:200px; height:300px; border:1px solid #000; position: relative; } .div2{ width: 40 ...
随机推荐
- [工作中的设计模式]责任链模式chain
一.模式解析 责任链模式是一种对象的行为模式.在责任链模式里,很多对象由每一个对象对其下家的引用而连接起来形成一条链.请求在这个链上传递,直到链上的某一个对象决定处理此请求.发出这个请求的客户端并不知 ...
- 如何將ViewData裡包含的Html輸出(MVC)
如何將ViewData裡包含的Html輸出(MVC) 默認輸入ViewData裡的Htm系統會自動把標籤轉換而達不到預覽的效果, 我們如果要呈現解析後的HTML則要調用@MvcHtmlString.C ...
- requerjs 合并 优化配置
/* * This is an example build file that demonstrates how to use the build system for * require.js. * ...
- 【luogu】 P1433 吃奶酪
题目描述 房间里放着n块奶酪.一只小老鼠要把它们都吃掉,问至少要跑多少距离?老鼠一开始在(0,0)点处. 输入格式: 第一行一个数n (n<=15) 接下来每行2个实数,表示第i块奶酪的坐标. ...
- 《我爱背单词》 Alpha版 发布说明
——发布地址(baidu网盘) http://pan.baidu.com/s/15omtB ——简介 <我爱背单词>是一款英语单词记忆和管理辅助软件,旨在帮助广大考生在短期内攻克GRE. ...
- Apache配置过程
要在一台主机上搭建多个网站,最简单的办法就是给不同的网站分配不一样的端口.下面我以Ubuntu 14.04 + Apache 2.4.7为例说一下在搭建过程中的一些注意事项. 1. 主配置文件是/et ...
- js中==和===的区别
==用来判断值是否相等: ===用来判断值和类型是否相等
- IntelliJ IDEA使用小技巧
1:设置类,接口,枚举注解模板 #if (${PACKAGE_NAME} && ${PACKAGE_NAME} != "")package ${PACKAGE_NA ...
- [转载] Ubuntu 16.04 LTS 一键安装VNC
安装 X11VNC: sudo apt install x11vnc -y 配置访问密码: sudo x11vnc -storepasswd /etc/x11vnc.pass 创建服务: vi /li ...
- java并发编程-基础
线程带来的风险 安全性:多线程操作执行顺序的不可预测性 -- 永远不发生糟糕的事情: 活跃性:代码无法得到执行,死锁.饥饿问题 -- 某件正确的事情最终会发生: 性能问题:活跃性只意味着某件事最终会发 ...