通过css实现透明背景层
来源:互联网 发布:mac拔出u盘 编辑:程序博客网 时间:2024/06/14 01:35
转载:http://www.jiaoben8.cn/Article-id102.html
利用css来是透明背景层效果,效果如下:
实现方法:
#Transparent{
width: 100%;
background:rgba(255, 255, 255, 0.8);
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#AFFFFFFF,endColorStr=#AFFFFFFF);
}
RGBa是一种在CSS中声明包含透明效果的颜色的方法,通常我习惯了使用”opacity“,它很简单易用,但是,opacity会使所有的子元素都变成透明的,而且很难去解决这个问题。
通过RGBa,我们可以将一个元素设置为透明,而不会影响其子元素。
background:rgba(255, 255, 255, 0.8);前三个值,分别是红,绿,蓝三个色值,后边的是它的透明度,0为完全透明,10为不透明。
但是并非所有的浏览器支持RGBa,所以我们针对不支持RGBa浏览器做如下设置:
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=#AFFFFFFF,endColorStr=#AFFFFFFF);
解释一下当中的代码:
enabled:可选项。布尔值(Boolean);
startColorStr:可选项。字符串(String)。设置或检索色彩渐变的开始颜色和透明度。
其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 - FF 。 RR 指定红色值, GG 指定绿色值, BB 指定蓝色值,参阅 #RRGGBB 颜色单位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。
EndColorStr:可选项。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅 startColorStr 属性。默认值为 #FF000000 。不透明黑色。
我们经常要用到的两个色值,应该最多为黑色透明,和白色透明,这两个色值分别是:黑色透明:startColorstr=#6B000000,endColorstr=#6B000000,白色透明:startColorStr=#AFFFFFFF,endColorStr=#AFFFFFFF。
当你做了如上操作后,你会发现div里面的内容也会变的模糊不清,解决方法很简单,对需要透明的div设成如上透明之后,里面的内容应该用一个div包起来,把里面包内容的div设置相对定位就好了:position:relative。
- 通过css实现透明背景层
- div+css实现背景透明
- CSS实现PNG图片背景透明效果
- css实现背景透明,内容不透明
- css如何实现背景透明,文字不透明?
- DIV+CSS 实现背景透明,文字不透明
- css实现背景透明文字不透明
- css实现div背景透明,文字不透明
- CSS实现背景透明,文字不透明
- css实现背景颜色透明,文字不透明
- CSS实现背景透明,文字不透明
- css实现背景透明文字不透明
- 透明背景层
- css实现div层透明毛玻璃
- CSS实现背景透明而背景上的文字不透明
- CSS实现DIV层背景颜色渐变
- css 透明背景
- CSS+DIV背景透明
- Hibernate 检索查询的几种方式(HQL,QBC,本地SQL,集成Spring等)
- tomcat配置多个web网站的配置详解
- 使用eclipse获取openLDAP的源码
- 为什么二进制文件与文本文件存入同样的数据,文件大小差异会这么大?(from <<Thinking in C++>>'s execise)
- 邱园红数据库编程前期学习总结
- 通过css实现透明背景层
- 你害怕校招的笔试吗?每天一百道!看你智商低不低!(第1至100题)
- ImageSwitcherGallery
- Apartment之COM中的线程模型
- Android开发讲座散记
- Wireshark抓包工具使用教程以及常用抓包规则
- 为什么要进行傅立叶变换?傅立叶变换究竟有何意义?如何用Matlab实现快速傅立叶变换
- ORACLE执行命令
- WinDbg查看函数内存地址