浅谈css实现背景颜色半透明的两种方法


Posted in HTML / CSS onDecember 06, 2021

在页面布局时,为了给用户不一样的视觉效果,需要设置div的背景颜色为半透明状态,你知道怎么设置吗?

接下来,就和大家聊聊如何用两种方式使div的背景颜色变成半透明,以及两种方式的优劣。感兴趣的朋友可以过来看看,希望对你有所帮助。

首先,我们用大家比较熟悉的CSS属性opacity来改变div的背景颜色。

描述:

外面大的div背景颜色为黄色,里面小的div的背景颜色为红色,现在我们需要设置大的div的背景颜色变成半透明状态,我们将opacity的属性值设为0.5,代码如下:

HTML部分:

<divclass="aa">
     <divclass="bb"我是内容</div>
 </div>

CSS部分:

.aa{
 
     width: 250px;
     height: 250px; 
     background: yellow;             
     opacity: 0.5;
     }
 
 .bb{ 
     width: 150px; 
     height: 150px; 
     background: red;
     }

效果图:

浅谈css实现背景颜色半透明的两种方法

如图所示,背景颜色的确变成了半透明,但是里面小div的背景以及文字都变成半透明了,这可能不是我们想要的效果,所以我们一般不使用这种方法。当然了,如果在页面布局时,你希望div里面所有的都变透明,就用opacity。
接下来我们用另一种方法,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; 
     }

效果图:

浅谈css实现背景颜色半透明的两种方法

看图一目了然,大的div透明度改变以后,对里面的背景和文字都没有任何影响。所以我们一般用background-color:rgba(0,0,0,0~1)来设置背景颜色透明。

以上介绍了两种方式改变div背景颜色的透明度,他们各有优劣,具体用什么方法,还要根据需要,找到最适合的方法,初学者可以多去练习,加深理解,希望对你有帮助。

 
HTML / CSS 相关文章推荐
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
Mar 09 HTML / CSS
灵活运用CSS3特性绘制简易版围棋效果
Sep 28 HTML / CSS
CSS3 calc()会计算属性详解
Feb 27 HTML / CSS
纯CSS3打造动感漂亮时尚的扇形菜单
Mar 18 HTML / CSS
css3实现简单的白云飘动背景特效
Oct 28 HTML / CSS
html5弹跳球示例代码
Jul 23 HTML / CSS
HTML5 Canvas绘制圆点虚线实例
Jan 01 HTML / CSS
小程序canvas中文字设置居中锚点
Apr 16 HTML / CSS
使用placeholder属性设置input文本框的提示信息
Feb 19 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
Mar 19 HTML / CSS
HTML5 canvas实现的静态循环滚动播放弹幕
Jan 05 HTML / CSS
background-position百分比原理详解
May 08 HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 #HTML / CSS
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
DIV CSS实现网页背景半透明效果
CSS实现五种常用的2D转换
CSS巧用渐变实现高级感背景光动画
在HTML中引入CSS的几种方式介绍
div与span之间的区别与使用介绍
You might like
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
ThinkPHP实现分页功能
2017/04/28 PHP
PHP+Redis 消息队列 实现高并发下注册人数统计的实例
2018/01/29 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
php提高脚本性能的4个技巧
2020/08/18 PHP
IE event.srcElement和FF event.target 功能比较
2010/03/01 Javascript
jquery事件与函数的使用介绍
2013/09/29 Javascript
jquery增加时编辑jqGrid(实例代码)
2013/11/08 Javascript
Bootstrap~多级导航(级联导航)的实现效果【附代码】
2016/03/08 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
jquery Form轻松实现文件上传
2017/05/24 jQuery
Angular 4环境准备与Angular cli创建项目详解
2017/05/27 Javascript
如何制作一个Node命令行图像识别工具
2018/12/12 Javascript
Node.js Buffer模块功能及常用方法实例分析
2019/01/05 Javascript
基于vue开发微信小程序mpvue-docs跳转页面功能
2019/04/10 Javascript
JavaScript文档加载模式以及元素获取
2020/07/28 Javascript
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
Python牛刀小试密码爆破
2011/02/03 Python
Python之str操作方法(详解)
2017/06/19 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
python3去掉string中的标点符号方法
2019/01/22 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
2020/06/30 Python
毕业生求职简历的自我评价
2013/10/23 职场文书
高校辅导员推荐信范文
2013/12/25 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
工伤赔偿协议书
2014/04/15 职场文书
大四毕业生自荐书
2014/07/05 职场文书
纪念九一八事变83周年国旗下讲话稿
2014/09/15 职场文书
大专生自我鉴定怎么写
2014/09/16 职场文书
工程部经理岗位职责
2015/02/02 职场文书
2015个人半年总结范文
2015/03/09 职场文书
《秦兵马俑》教学反思
2016/02/24 职场文书
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python
Django中celery的使用项目实例
2022/07/07 Python