首页 > 网页制作 > CSS

设置div背景透明的方法示例

admin CSS 2022-02-05 15:20:33 div背景透明   背景div透明"

div背景透明常见的有两种方法:

1. 通过opacity属性设置,取值0~1,0表示透明,1表示不透明,但是这种方法会把div上的内容也同时进行透明设置。

效果如下:

在这里插入图片描述

2.通过rgba格式的background-color设置,格式为:background-color:rgba(0,0,0,0~1),0表示透明,1表示不透明。

在这里插入图片描述

代码如下:




    
    
    Document
    


    
    
透明div方法一,通过opacity设置透明度,div上的文字也透明:opacity: 0.6;

透明div方法二,通过rgba设置透明度,div上面的文字不透明:background-color:rgba(255,0,0,0.5);

这里还有一点要注意的:
rgba() 函数使用红®、绿(G)、蓝(B)、透明度(A)的叠加来生成各式各样的颜色。

RGBA 即红色、绿色、蓝色、透明度(英语:Red, Green, Blue、Alpha)。
红色(R)0 到 255 间的整数,代表颜色中的红色成分。。
绿色(G)0 到 255 间的整数,代表颜色中的绿色成分。
蓝色(B)0 到 255 间的整数,代表颜色中的蓝色成分。
透明度(A)取值 0~1 之间, 代表透明度。
可以百度百科查找rgba值.
类似于:

在这里插入图片描述

颜色码对照表链接:
https://www.iwyv.com/d/files/20220205/dqmevnatv1s

到此这篇关于设置div背景透明的方法示例的文章就介绍到这了,更多相关div背景透明内容请搜索潘少俊衡以前的文章或继续浏览下面的相关文章,希望大家以后多多支持潘少俊衡!

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:/web/CSS/73174.html

留言与评论(共有 0 条评论)
   
验证码:

潘少俊衡

| 桂ICP备2023010378号-4

Powered By EmpireCMS

谷姐神农

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

感谢潘少俊衡友情技术支持