标签：透明度 opacity 简介 元素 100px rgba css 255

一、透明度设置

1. opacity
   用法：
   opaticy:0-1;

2.rgba
用法：
rgba:(0-255,0-255,0-255,0-1)
透明度取值均为0-1之间。其中，0代表完全透明，1代表完全不透明。
注：若取值超出范围（小于0或大于1），那么会就近取合法值。如取1.2则按1显示，取负数按0显示。
举例：
html:

这里是box1 这里是box2 这里是box3

css:

(img)
我们将上例子中的opacity改为rgba再看
```
css:
.box1{width: 100px;height: 100px;background-color: rgba(255, 0, 0, 1);}
.box2{width: 100px;height: 100px;background-color: rgba(255, 0, 0, 0.5);}
.box3{width: 100px;height: 100px;background-color: rgba(255, 0, 0, 0);}
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JW0lzFqi-1583117743352)(https://i.loli.net/2020/03/01/Zr1d7BPEQ8MOsi3.png)]

二、透明度属性

仔细观察上面两个例子，会发现opacity设置为0时其内部的文字也不显示了，但是rgba设置为0其内部文字依然显示。
我们给元素设置opacity时，其内部元素会和父元素有同样的透明度，当父元素透明度为0时，其内部元素透明度均为0。
举例：

这里是box1 这里是box2 这里是box3 ~~ \`\`\` (img)

我们可以将opacity理解为元素变成一块透明玻璃，其值为0时全透明不可见，几块颜色不同的元素叠放在一起可以改变叠加部分的颜色。
千锋逆战班，等你来战。

• 点赞
• 收藏
• 分享
• • 文章举报

Christin634 发布了1 篇原创文章 · 获赞 0 · 访问量 12 私信 关注

标签：透明度,opacity,简介,元素,100px,rgba,css,255
来源： https://blog.csdn.net/Christin634/article/details/104607192

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。