浅谈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 相关文章推荐
CSS3教程(9):设置RGB颜色
Apr 02 HTML / CSS
HTML5 WebGL 实现民航客机飞行监控系统
Jul 25 HTML / CSS
html5中为audio标签增加停止按钮动作实现方法
Jan 04 HTML / CSS
HTML5的download属性详细介绍和使用实例
Apr 23 HTML / CSS
html5实现完美兼容各大浏览器的播放器
Dec 26 HTML / CSS
Html5实现二维码扫描并解析
Jan 20 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
Nov 14 HTML / CSS
HTML5新标签兼容——&gt; 的两种方法
Sep 12 HTML / CSS
canvas中普通动效与粒子动效的实现代码示例
Jan 03 HTML / CSS
Html5嵌入钉钉的实现示例
Jun 04 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
Dec 14 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 HTML / CSS
HTML怎么设置下划线?html文字加下划线方法
Dec 06 #HTML / CSS
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
DIV CSS实现网页背景半透明效果
CSS实现五种常用的2D转换
CSS巧用渐变实现高级感背景光动画
在HTML中引入CSS的几种方式介绍
div与span之间的区别与使用介绍
You might like
PHP分页函数代码(简单实用型)
2010/12/02 PHP
php加水印的代码(支持半透明透明打水印,支持png透明背景)
2013/01/17 PHP
php简单图像创建入门实例
2015/06/10 PHP
在IE,Firefox,Safari,Chrome,Opera浏览器上调试javascript
2008/12/02 Javascript
javascript写的一个链表实现代码
2009/10/25 Javascript
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
把jQuery的类、插件封装成seajs的模块的方法
2014/03/12 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
2015/06/23 Javascript
JavaScript驾驭网页-DOM
2016/03/24 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
js判断数组key是否存在(不用循环)的简单实例
2016/08/03 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
ExtJs异步无法向外传值和赋值的完美解决办法
2017/06/14 Javascript
快速掌握jquery分页插件jqPaginator的使用方法
2017/08/09 jQuery
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
薪资那么高的Web前端必看书单
2017/10/13 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
JS实现带动画的回到顶部效果
2017/12/28 Javascript
JavaScript时间日期操作实例小结【5个示例】
2018/12/22 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
2020/08/12 Javascript
利用python发送和接收邮件
2016/09/27 Python
python实现数据图表
2017/07/29 Python
Django中使用celery完成异步任务的示例代码
2018/01/23 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
Python如何避免文件同名产生覆盖
2020/06/09 Python
python编写softmax函数、交叉熵函数实例
2020/06/11 Python
Python 将代码转换为可执行文件脱离python环境运行(步骤详解)
2021/01/25 Python
生物技术专业研究生自荐信
2013/09/22 职场文书
鞋类设计与工艺专业销售求职信
2013/11/01 职场文书
给校长的建议书100字
2014/05/16 职场文书
小区文明倡议书
2014/05/16 职场文书
微电影大赛策划方案
2014/06/05 职场文书
党员先进性教育整改措施
2014/09/18 职场文书