在页面布局时，为了给用户不一样的视觉效果，需要设置div的背景颜色为半透明状态，你知道怎么设置吗？
接下来，就和大家聊聊如何用两种方式使div的背景颜色变成半透明，以及两种方式的优劣。感兴趣的朋友可以过来看看，希望对你有所帮助。
首先，我们用大家比较熟悉的CSS属性opacity来改变div的背景颜色。
打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）
更多相关视频：
0基础前端利用『HTML+CSS』制作你喜欢的暗黑破坏神网页开发：BV1C54y1X7ro
前端发展简史，功能以及未来趋势！（你值得观看）：BV1w5411s7e4
给想学编程又无从下手的小白一些建议：BV1Zf4y117ji
「HTML+CSS」实现妙笔千山播放器制作（思路讲解＋代码+成品效果）！：BV18p4y1Q7Y1
前端面试，跳槽必刷200+真面试题，让你披荆斩棘走进大厂：BV1bz4y1d7Ys
十年前端：为你讲解前端之路：BV1L541147hW
描述：
外面大的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。
接下来我们用另一种方法， margin: 0px 0px 25px; word-break: break-word; color: rgb(51, 51, 51); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-size: 16px;">HTM部分一样，只需要将opacity换成rgba即可。
代码如下：
.aa{
width: 250px;
height: 250px;
}
.bb{
width: 150px;
height: 150px;
background: red;
}
效果图：
看图一目了然，大的div透明度改变以后，对里面的背景和文字都没有任何影响。所以我们一般用 margin: 0px 0px 25px; word-break: break-word; color: rgb(51, 51, 51); font-family: -apple-system, "SF UI Text", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; font-size: 16px;">以上介绍了两种方式改变div背景颜色的透明度，他们各有优劣，具体用什么方法，还要根据需要，找到最适合的方法，初学者可以多去练习，加深理解，希望对你有帮助。
以上就是css实现背景颜色半透明的两种方法的详细内容，更多请关注我！！！！