css实现背景颜色半透明的两种方法
在页面布局时,为了给用户不一样的视觉效果,需要设置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;
}
效果图:
如图所示,背景颜色的确变成了半透明,但是里面小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;
}
效果图:
看图一目了然,大的div透明度改变以后,对里面的背景和文字都没有任何影响。所以我们一般用background-color:rgba(0,0,0,0~1)来设置背景颜色透明。
以上介绍了两种方式改变div背景颜色的透明度,他们各有优劣,具体用什么方法,还要根据需要,找到最适合的方法,初学者可以多去练习,加深理解,希望对你有帮助。
以上就是css实现背景颜色半透明的两种方法的详细内容,更多请关注我!!!!
css实现背景颜色半透明的两种方法相关推荐
- php设置背景为透明,css如何设置背景颜色透明?css设置背景颜色透明度的两种方法介绍...
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...
- css如何设置背景颜色透明?css设置背景颜色透明度的两种方法介绍
在网页布局中有时为了网页的整体美观,可能需要将网页中的某些部分设置为背景颜色透明,那么如何设置背景颜色透明呢?本篇文章就来给大家介绍一下css设置背景颜色透明的方法. 在css中设置背景颜色透明的方法 ...
- CSS设置背景颜色透明的两种方法
在css中设置背景颜色透明的方法有两种: 一种是通过rgba方法设置,另一种是通过backgroundh和opacity设置 下面分别是css中 两种方法实现的背景颜色透明实例 1,通过backgro ...
- 利用颜色和形态学两种方法进行车牌区域提取的OpenCV代码
图像处理开发需求.图像处理接私活挣零花钱,请加微信/QQ 2487872782 图像处理开发资料.图像处理技术交流请加QQ群,群号 271891601 2016-7-28日:用MSER算法也实现了车牌 ...
- 用 CSS实现Bubble提示框的两种方法
第一种方法:主要是通过css border属性来实现,两个小三角形叠加,实现小箭头: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- CSS实现背景图片垂直居中定位2种方法
实现背景图片垂直居中定位2种方法 第一种方法 background: url("../img/images/login_Bg.png") no-repeat center cent ...
- css实现图片自适应缩放的两种方法
想要实现图片根据给定宽高来自适应缩放的时候,会想到什么属性?是object-fit: cover;吗? 来试一试!为了展示效果,我特地选了对称的图片.下面两个img元素都有一个div包裹,div设置固 ...
- html怎么让页面没有滑动条,使用CSS实现无滚动条滚动的两种方法
我们都知道,撸页面的时候当我们的内容超出了我们的div,往往会出现滚动条,影响美观. 尤其是当我们在做一些导航菜单的时候.滚动条一出现就破坏了UI效果. 我们不希望出现滚动条,也不希望超出去的内容被放 ...
- CSS导入使用及引用的两种方法
方法一<link rel="stylesheet" type="text/css" href="test.css"> 方法二&l ...
- CSS多行文字垂直居中的两种方法
<div class="middle-box"><div class="middle-inner"><p><span ...
最新文章
- 1010 Radix
- 在leangoo 里怎么设置工作量估算,添加附件,设置截止时间?
- 吕乐:医学影像学者的医者仁心 | 智源专访
- 关于java数据库章节connection连接不成功的时候!!!
- webAPP优化方案总结
- 感知机数据算法的对偶形式
- php能不能用MyBatis,Mybatis与Ibatis的区别
- 2018.8.26 Spring自学如门
- Qt文档阅读笔记-windowOpacity官方解析及实例(两种方法使得程序渐变出现)
- python中输出某段文字_Python如何输出字符串中字符出现的个数
- 软件技术方案_智慧工地整体解决方案核心系统有哪些?
- flume学习(九):使用Morphline Interceptor
- 《普林斯顿微积分读本》 第二章 三角学回顾
- 周赛-mZY寻宝(bfs搜索)
- mpegtsenc.c的源码
- 1635 超大型 LED 显示屏
- 22-04-23 西安 javaSE(14)文件流、缓冲流、转换流、对象流、标准流、关闭IO资源的封装类IOUtils(纳命来)
- Python基于二维码实现的在线编解码系统
- 【uniapp】页面下拉刷新
- 按键精灵移动端系列一滑块本地识别源码参考例子