html背景色不透明度,css怎么设置颜色不透明度?
在页面布局时,为了给用户不一样的视觉效果,需要设置div的背景颜色为半透明状态,你知道怎么设置吗?下面我们来看一下使div的背景颜色变成半透明的两种方式。
一、可以使用CSS属性opacity来改变div背景颜色的透明度。
描述:外面大的div背景颜色为黄色,里面小的div的背景颜色为红色,现在我们需要设置大的div的背景颜色变成半透明状态,我们将opacity的属性值设为0.5,代码如下:
HTML部分:
CSS部分:.aa{
width: 250px;
height: 250px;
background: yellow;
opacity: 0.5;
}
.bb{
width: 150px;
height: 150px;
background: red;
}
效果图:
如图所示,背景颜色的确变成了半透明,但是里面小div的背景以及文字都变成半透明了,这可能不是我们想要的效果,所以我们一般不使用这种方法。
二、接下来我们用另一种方法,background-color:rgba(0,0,0,0~1),使用这个方法就只会设置div背景透明,而不会影响到div里的内容。
HTM部分一样,只需要将opacity换成rgba即可。代码如下:.aa{
width: 250px;
height: 250px;
background-color: rgba(255,255,0,0.5);
}
.bb{
width: 150px;
height: 150px;
background: red;
}
效果图:
我们一般用background-color:rgba(0,0,0,0~1)来设置背景颜色透明。
html背景色不透明度,css怎么设置颜色不透明度?相关推荐
- html怎么设置颜色透明,CSS3如何设置颜色不透明度?
在CSS3之前,我们设置颜色的方式包含十六进制颜色(如#F00).rgb模式颜色.或指定颜色的英文名称(如red),但这些方法无法改变颜色的不透明度.在CSS3中新增了两种设置颜色不透明度的方法,一种 ...
- html中不透明度怎么写,css如何设置div不透明度?
在IE中需要通过"filter"来定义透明度"opacity",而在Mozilla中是可以直接解析"opacity",所以如果要使得这个效果 ...
- HTML CSS 如何设置颜色
RGBA 颜色 RGBA 颜色值是 RGB 颜色值的扩展,带有 alpha 通道 - 该通道规定颜色的不透明度. RGBA 颜色值是这样规定的:rgba(red, green, blue, alpha ...
- css透明度为0.2是什么颜色,CSS3颜色不透明度的设置方法【web前端】
在CSS3之前,我们设置颜色的方式包含十六进制颜色(如#F00).rgb模式颜色.或指定颜色的英文名称(如red),但这些方法无法改变颜色的不透明度.在CSS3中新增了两种设置颜色不透明度的方法,一种 ...
- CSS3颜色不透明度如何设置
web前端技术包含HTML和CSS样式,两者是相辅相成的,学习CSS样式不必可少,那么在学习CSS样式中,CSS3颜色不透明度如何设置?在CSS3之前,我们设置颜色的方式包含十六进制颜色(如#F00) ...
- CSS 的 rgb() 和 rgba() 函数(设置颜色的方式之一)
一.CSS中设置颜色的四种方式: 值 描述 color_name 规定颜色值为颜色名称的颜色(如:yellow黄色) hex_number 规定颜色值为16进制颜色值(比如:#ff0000) rgb_ ...
- css如何设置透明度?两种方法
一.css rgba()设置颜色透明度 语法: rgba(R,G,B,A); RGBA 是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha(不透明度)三个单词的缩写.RGBA 颜 ...
- css如何设置透明度
css如何设置透明度 今天面试遇到了一个之前写css样式时没太注意的问题,关于css如何设置透明度.两种方法如下: css设置透明度的方法:1.使用rgba()设置颜色透明度,语法"back ...
- css如何设置透明度?设置透明度的两种方法(代码实例)
在前端页面开发布局的时候,为了给用户呈现不同的效果,经常需要设置透明度,那么css是怎样设置透明度的?本章给大家介绍用css设置透明度的两种方法(代码实例).有一定的参考价值,有需要的朋友可以参考一下 ...
- html css超链接字体颜色,css如何定义字体颜色
css定义字体颜色的方法:1.在文字所在标签中直接使用css样式设置颜色即可.2.在文字所在标签中使用id或class引入css字体颜色样式. css设置字体颜色的方法: 1.标签内设置CSS字体颜色 ...
最新文章
- linux c strdup 字符串拷贝
- django Error: [Errno 10013]
- SlidingMenu的使用,结合Fragment(eclipse环境)
- 提取javadoc_使用JavaParser从源文件中提取JavaDoc文档
- 小白入,告诉你.ssh新建config文件究竟是哪种文件!
- Windows Server 2019 安装应用商店
- 阿里巴巴开放平台Oauth2.0协议获取access_token
- 如何让html 兼容IE和chrome,IE Tab(让Chrome兼容IE)
- Echarts 模拟飞机飞行动态图
- 【综合实训】图书管理系统——概要设计说明书
- SourceTree这是一个无效源路径(更改git账号和密码导致无效源路径看这里)
- 一款对程序员体验友好的浏览器翻译插件
- 国外LEAD赚钱提现到WMZ,附赚钱项目
- python实现C4.5
- Gitlab CI/CD 中使用 ssh-key,登录远程主机部署,执行远程主机的特定脚本
- js 正则校验 长数字 电话号码 银行卡号
- 基于python的2048游戏设计_用python写一个2048游戏
- prometheus监控mysql慢查询_使用Grafana+Prometheus监控mysql服务性能
- 重读数据结构之爬楼梯问题(动态规划)
- 短线王的盯盘宝怎么样_短线王炒股十大技巧!