实现透明的css方法通常有以下3种方式,以下是不透明度都为80%的写法:

css3的opacity:x,x 的取值从 0 到 1,如opacity: 0.8

兼容性:IE6、7、8不支持,IE9及以上版本和标准浏览器都支持

使用说明:设置opacity元素的所有后代元素会随着一起具有透明性,一般用于调整图片或者模块的整体不透明度,使用opacity后整个模块都透明了

css3的rgba(red, green, blue, alpha),alpha的取值从 0 到 1,如rgba(255,255,255,0.8)

所谓RGBA颜色,顾名思意就是R+G+B+A的颜色,再具体点就是red+green+blue+alpha的颜色,翻译一下就是红+绿+蓝+Alpha透明的颜色

其中,表示半透明度的0.8前面的0是可以省掉的,直接.8也是可以的。

兼容性:IE6、7、8不支持,IE9及以上版本和标准浏览器都支持

解决IE8浏览器不支持rgba的方法:

background:rgba(0,0,0,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#7F000000,endcolorstr=#7F000000);

使用说明:设置颜色的不透明度,一般用于调整background-color、color、box-shadow等的不透明度。

在background-color中使用rgba,标准浏览器中,背景透明,文字不透明,那么使用rgba实现背景透明,文字不透明是可取的。

IE专属滤镜 filter:Alpha(opacity=x),x 的取值从 0 到 100,如filter:Alpha(opacity=80)

css-设置背景透明度的更多相关文章

  1. CSS 设置背景透明度,不影响子元素

    由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素. 解决方法: 1> 使用 RGBA Example .classname { /* RGBa, 透明度0.6 ...

  2. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  3. css 设置背景图片模糊,内容不模糊

    需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 原始代码: <!DOCTYPE html> <html lang=" ...

  4. css设置背景固定不滚动效果的示例

    css设置背景固定不滚动效果的示例 背景固定不滚动各位看到最多的无非就是QQ空间了,我们在很多的空间都可以看到内容滚动而北京图片不滚动了,下文整理了几个关于背景固定不滚动css代码. 一.css设置背 ...

  5. 解决css设置背景透明,文字不透明

    设置元素的透明度:  -moz-opacity:0.8; /*在Firefox中设置元素透明度  filter: alpha(opacity=80); /*ie使用滤镜设置透明   但是当我们对一个标 ...

  6. CSS——设置背景

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  7. css改变背景透明度【转】

    兼容主流浏览器的CSS透明代码: .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0. ...

  8. css设置背景图片,ie显示不了

    本来是想给导航栏<div class="nav"></div>添加背景图片的,设置css样式如下: .nav{background:url("ht ...

  9. (转)background-position—CSS设置背景图片的位置

    background-position :在 CSS 中通过 background-position 属性可以调整背景图片的位置.因为在默认情况下背景图片都是从设置了 background-posit ...

  10. CSS设置背景透明字体不透明

    写CSS时给容器设置透明度的时候如果使用background-color: #000000; opacity: 0.5;这时会出现容器里的文字也跟着透明.解决办法是不用十六进制的色值和透明度分开写,使 ...

随机推荐

  1. 安装了高版本OS X 之后无法使用MacPorts的port命令

    安装了高版本OS X 之后无法使用MacPorts的port命令 pod update提示: Current platform "darwin 14" does not match ...

  2. spring @value和@@PropertySource注解简单使用

    @Value注解:可以使用注入基本字符串 EL表达式,从配置文件读取数据@PropertySource用于引入单个配置文件 @PropertySources用于引入多个配置文件 @PropertySo ...

  3. 在搞OSS对象存储中发现了自身的一些不足

    最近在搞OSS对象存储,发现了自身的一些不足,趁着有空在此做个总结,希望能够帮助到大家!!! 首先解释下OSS,Object Storage Service(对象存储服务),一般的云公司,都会提供OS ...

  4. Spring系列之事务的控制 注解实现+xml实现+事务的隔离等级

    Spring系列之事务的控制 注解实现+xml实现 在前面我写过一篇关于事务的文章,大家可以先去看看那一篇再看这一篇,学习起来会更加得心应手 链接:https://blog.csdn.net/pjh8 ...

  5. 使用精灵代理ip最节约成本的策略!

    使用ip代理业务用例 1.使用精灵代理(http://www.jinglingdaili.com/Shop-index.html),通过Api获取,每次返回一个固定时间(五分钟)的IP,然后将获取到的 ...

  6. Linux知识点笔记

    Linux启动脚本 rcS文件,rcS文件位于系统根目录下的"/etc/init.d"下.  rcS文件本质是一个bash shell脚本,因此遵循bash脚本的语法规则. [1] ...

  7. 【题解】CF1368C Even Picture

    \(\color{purple}{Link}\) \(\text{Solution:}\) 这是一道构造题. 题目要求恰好有\(n\)个点的四周全都是灰色点,所以直接输正方形是不行了. 考虑\(k=1 ...

  8. ANOI 2009 【同类分布】

    好累啊啊啊~~~~~~,刷了一天的题了,嗯,再写两篇题解我就去颓Slay... 思路分析: 刚刚我们讲了数位DP,现在就感受一下吧.(其实我也就只敢做做安徽的题,四川的数位DP想都不敢想) 嗯好,我们 ...

  9. DDOS、CC、sql注入,跨站攻击防御方法

    web安全常见攻击解读--DDos.cc.sql注入.xss.CSRF 一,DDos https://www.cnblogs.com/sochishun/p/7081739.html#4111858 ...

  10. dockerfile关键字

    DockerFile关键字(保留字指令) FORM:基础镜像,表明当前镜像是基于那么镜像的 MAINTAINER :镜像维护者的名字和邮箱地址 RUN:容器构建时需要用到的命令 EXPOSE:当前容器 ...