css设置背景透明色,css 背景色透明

　　在页面布局中，为了给用户不同的视觉效果，需要将div的背景色设置为半透明状态。你知道如何设置它吗？

　　接下来我们来讲讲如何用两种方法让div的背景色半透明，以及两种方法的优缺点。感兴趣的朋友可以过来看看，希望能帮到你。

　　首先，我们使用熟悉的CSS属性opacity来改变div的背景色。

　　描述：

　　外面大div的背景色是黄色，里面小div的背景色是红色。现在我们需要将大div的背景色设置为半透明。我们将不透明度的属性值设置为0.5，代码如下：

　　HTML部分：

　　Class= aa divclass= bb 我是内容/div /divCSS部分：aa{宽度：250px高度：250px背景：黄色；不透明度：0.5；} .bb{宽度：150px高度：150px背景：红色；}效果图：

　　如图，背景色确实变成半透明了，但是里面的小div的背景和文字都变成半透明了，这可能不是我们想要的效果，所以一般不采用这种方法。当然，如果您希望页面布局期间div中的所有内容都是透明的，请使用不透明。

　　接下来我们用另一种方法，background-color: rgba (0，0，0，0 ~ 1)。使用这种方法，我们将只设置div背景透明，但不会影响div中的内容。

　　HTM部分是相同的，只是改变不透明度为rgba。

　　代码如下：aa{宽度：250px高度：250px背景色：rgba(255，255，0，0.5)；} .bb{宽度：150px高度：150px背景：红色；}效果图：

　　看图一目了然。大div透明度更改后，对里面的背景和文字没有影响。所以我们通常使用background-color: rgba (0，0，0，0 ~ 1)来设置背景色透明。

　　以上介绍了改变div背景色透明度的两种方法。它们各有利弊。具体应该用什么方法？根据需要，应该找到最合适的方法。新手可以多练习，加深理解。希望对你有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。