css实现背景颜⾊半透明的两种⽅法
在页⾯布局时，为了给⽤户不⼀样的视觉效果，需要设置div的背景颜⾊为半透明状态，你知道怎么设置吗？
接下来，就和⼤家聊聊如何⽤两种⽅式使div的背景颜⾊变成半透明，以及两种⽅式的优劣。感兴趣的朋友可以过来看看，希望对你有所帮助。
⾸先，我们⽤⼤家⽐较熟悉的CSS属性opacity来改变div的背景颜⾊。
描述：
外⾯⼤的div背景颜⾊为黄⾊，⾥⾯⼩的div的背景颜⾊为红⾊，现在我们需要设置⼤的div的背景颜⾊变成半透明状态，我们将opacity的属性值设为0.5，代码如下：
HTML部分：伞的英语
<divclass="aa">
<divclass="bb">我是内容</div>
</div>
CSS部分：
.aa{
qq双开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实现背景颜⾊半透明的两种⽅法的详细内容，更多请关注我
