css-设置背景透明度
实现透明的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-设置背景透明度的更多相关文章
- CSS 设置背景透明度,不影响子元素
由于 opacity 属性能被子元素继承,使用它设置父元素背景透明度时也会影响子元素. 解决方法: 1> 使用 RGBA Example .classname { /* RGBa, 透明度0.6 ...
- img只显示图片一部分 或 css设置背景图片只显示图片指定区域
17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...
- css 设置背景图片模糊,内容不模糊
需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 原始代码: <!DOCTYPE html> <html lang=" ...
- css设置背景固定不滚动效果的示例
css设置背景固定不滚动效果的示例 背景固定不滚动各位看到最多的无非就是QQ空间了,我们在很多的空间都可以看到内容滚动而北京图片不滚动了,下文整理了几个关于背景固定不滚动css代码. 一.css设置背 ...
- 解决css设置背景透明,文字不透明
设置元素的透明度: -moz-opacity:0.8; /*在Firefox中设置元素透明度 filter: alpha(opacity=80); /*ie使用滤镜设置透明 但是当我们对一个标 ...
- CSS——设置背景
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- css改变背景透明度【转】
兼容主流浏览器的CSS透明代码: .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0. ...
- css设置背景图片,ie显示不了
本来是想给导航栏<div class="nav"></div>添加背景图片的,设置css样式如下: .nav{background:url("ht ...
- (转)background-position—CSS设置背景图片的位置
background-position :在 CSS 中通过 background-position 属性可以调整背景图片的位置.因为在默认情况下背景图片都是从设置了 background-posit ...
- CSS设置背景透明字体不透明
写CSS时给容器设置透明度的时候如果使用background-color: #000000; opacity: 0.5;这时会出现容器里的文字也跟着透明.解决办法是不用十六进制的色值和透明度分开写,使 ...
随机推荐
- Android作业 0923
计算器小应用 package com.example.myhomework2; import androidx.appcompat.app.AppCompatActivity; import andr ...
- Spring 系列之jdbcTemplate的使用
Spring系列之 jdbcTemplate 啥是jdncTemplate? t他是spring框架中提供的一个对象,是对原始的jdbcAPI对象的简单封装,spring框架为我们提供了很多操作,模板 ...
- Spring Boot 自动配置的原理、核心注解以及利用自动配置实现了自定义 Starter 组件
本章内容 自定义属性快速入门 外化配置 自动配置 自定义创建 Starter 组件 摘录:读书是读完这些文字还要好好用心去想想,写书也一样,做任何事也一样 图 2 第二章目录结构图 第 2 章 Spr ...
- Gitlab集成Sonarqube自动检测代码并发送报告给提交者
使用gitlab-ci.sonarqube.sonar-scanner 实现如下功能 1.一旦提交代码就进行代码质量检测 2. 发送检测报告邮件给提交者 先来看下最终结果,邮件中有检测报告,具体bug ...
- java转python代码
今天发现一个好玩的工具:可以直接将java转成python 1. 安装工具(windows 环境下面) 先下载antlr: http://www.antlr3.org/download/antlr-3 ...
- Arduino Mega 2560
Arduino Mega 2560 www.theengineeringprojects.com/ 此板子有54个引脚,16个模拟量输入引脚,12个PWM输出引脚,4个串口,带I2C,SPI通讯口,更 ...
- 几个常用markdown工具的主要优缺点
几个常用markdown工具的主要优缺点 最近对几个热门的markdown工具做了一个对比表 表格 脚注 图片和图床 平台 移动端 实时预览 收费 操作难度 导出功能 mweb 非常棒 预览正常显示 ...
- 设计完美windbg断点
说到现场调试,断点是最重要的.通常,在生产环境中解决一个非常复杂的问题需要在本地.非生产环境中调试我自己的一台测试机器.我通常会调试有问题的进程或代码,以便更好地了解它是如何工作的,以及在我进入时需要 ...
- Docker笔记6:Docker 常见命令及镜像管理
目 录 一.Docker 常用命令 docker version 命令 docker info 命令 二.Docker 镜像管理 搜索镜像:docker search 镜像名 获取镜像:docker ...
- 用 shell 脚本做 restful api 接口监控
问题的提出 基于历史原因,公司有一个"三无"采集服务--无人员.无运维.无监控--有能力做的部门不想接.接了的部门没能力.于是就一直这样裸奔,直到前几天一个依赖于这个采集服务的大数 ...