实现透明的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. 帮你理清React的生命周期

    这是一个从印记中文 | react官方文档提取总结的,算是帮自己理清并且强化记忆React的生命周期,以便以后编写组件的时候能够有更清晰的思路.本文如有纰漏,欢迎指正 整体上来讲,React生命周期分 ...

  2. logging模块培训小结

    Python自动化课程又上了一节课,每一个自动化框架都涉及到日志的使用,logging模块是Python的一个标准库模块,由标准库模块提供日志记录API的关键好处是所有Python模块都可以使用这个日 ...

  3. C++ 异常处理 catch(...)介绍

    转载:https://blog.csdn.net/fcsfcsfcs/article/details/77717567 catch(-)能够捕获多种数据类型的异常对象,所以它提供给程序员一种对异常 对 ...

  4. 启动你的Android应用:运行设备模拟器和调试代码(第3部分)

    下载all source for Test Proj: Test.zip - 306 KB 文章指出 本文包含了我即将出版的新书<启动Android应用程序>中的第三章. 在我完成这本书之 ...

  5. fastadmin toggle switch 开关 ids 值为空的解决办法

    这个是低版本的一个bug 官方已给出说明,由于项目原因未选择升级版本 现在讲解决办法 1.在自定义开关的字段假如table:table 2.修改require-table.js 在536行左右的 to ...

  6. Redis哨兵知识点总结

    1.Redis哨兵介绍 sentinal,中文名是哨兵 A.哨兵是redis集群架构中非常重要的一个组件,主要功能如下 集群监控,负责监控redis master和slave进程是否正常工作 消息通知 ...

  7. Shell Scripting 笔记

    Shell Scripting Tutorial Variables in the Bourne shell do not have to be declared, as they do in lan ...

  8. Ubuntu20.04 体验和美化

    Ubuntu20.04美化和体验 windows用久了,换下系统也挺好的.ubuntu20.04优化后,用起来蛮舒服的. 系统配置 1.修改软件源 Ubuntu默认是国外的软件源, 我们可以手动切换为 ...

  9. fastdfs之同一台storage server下包含多个store path

    一,查看本地centos的版本 [root@localhost lib]# cat /etc/redhat-release CentOS Linux release 8.1.1911 (Core) 说 ...

  10. 基于Docker的MySql

    MySQL Server安装教程 考虑到实际情况需要经常使用MySQL,为了方便大家能够快速基于Docker搭建MySQL这里以Linux下为例 进行说明,对于Windows用户来说直接通过查看官网H ...