initial-scale1.0 / titleOpacity Example/title style /* 清除浮动样式 */ .clearfix::after { content: ; display: table; clear: both; } .container { margin-top: 50px; } .container div { float: left; width: 200px; height: 200px; font-size: 26px; text-align: center; line-height: 200px; margin-right: 30px; color: #333; font-weight: bold; } .container div { background-color: #f00; } .container .div1 { opacity: 1; } .container .div2 { opacity: 0.7; } .container .div3 { opacity: 0.3; } .container .div4 { opacity: 0.1; } /style /head body h1opacity属性的透明度/h1 div classcontainer clearfix div classdiv1opacity1/div div classdiv2opacity0.7/div div classdiv3opacity0.3/div div classdiv4opacity0.1/div /div /body/html 效果如下其内部的文字也自动带上透明度了 2、透明度的图像 !DOCTYPE htmlhtml langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width。
云桃桃 -大专生一枚程序媛感谢关注，代码如下 !DOCTYPE htmlhtml langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width， 1); } .container2 .div2 { background: rgba(255。
0.3); } .container2 .div4 { background: rgba(255，。
rgba 是 CSS 中用来表示颜色的一种方式它由红色R、绿色G、蓝色B和透明度A四个通道组成，回复 “前端基础题”可免费获得前端基础 100 题汇总回复 “前端工具”可获取 Web 开发工具合集 287篇原创内容-更多前端系列内容可以go公众.h云桃桃 后台回复“ 前端工具 ”可获取开发工具持续更新中 后台回复“ 前端基础题 ”可得到前端基础100题汇总持续更新中 后台回复“ 前端电子书 ”可获取20本精选电子书 前言 透明度在网页设计中扮演着重要的角色透明度的合理运用可以提升网页设计的美感和功能性增强用户体验突出重点内容同时也为设计师提供了更多的创作空间和可能性， initial-scale1.0 / titleOpacity Example/title style /* 清除浮动 */ .clearfix::after { content: ; display: table; clear: both; } img { display: block; width: 100%; } .container { margin-top: 50px; } .container div { float: left; width: 200px; margin-right: 30px; } .container img { transition: all 0.3s; /* 添加过渡效果 */ } .container div { border: 1px solid #333; } .container div p { margin: 10px 10px; line-height: 24px; height: 48px; color: #333; font-size: 14px; /* 设置超出2行显示省略号 */ word-break: break-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .container div:hover img { opacity: 0.5; } /style /head body div classcontainer clearfix div img srcimg/tree.png alt / p摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色/p /div div img srcimg/tree.png alt / p摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色/p /div div img srcimg/tree.png alt / p摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色/p /div div img srcimg/tree.png alt / p摩天手(Mofii) sweet无线复古朋克键鼠套装 办公键鼠套装 鼠标 电脑键盘 笔记本键盘 白绿色/p /div /div /body/html 效果如下， 0。
来看代码， ok我们通过一个例子来对比一下 opacity 和 rgba， 1、透明度的 div !DOCTYPE htmlhtml langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width， 怎么做呢就是配合 hover， 0.7); } .container2 .div3 { background: rgba(255， 0， 2 个透明度属性 可以表示透明度的有 2 个属性分别是opacity和rgba。
0， 0， 需要注意的是 该属性可以继承即子元素会继承父元素的透明度， initial-scale1.0 / titleOpacity Example/title style /* 清除浮动样式 */ .clearfix::after { content: ; display: table; clear: both; } img { display: block; width: 100%; } .container { margin-top: 50px; } .container div { float: left; width: 200px; font-size: 16px; text-align: center; margin-right: 30px; color: #333; font-weight: bold; } .container div { border: 1px solid #333; } .container .img1 { opacity: 1; } .container .img2 { opacity: 0.7; } .container .img3 { opacity: 0.3; } .container .img4 { opacity: 0.1; } /style /head body div classcontainer clearfix div classdiv1 img classimg1 srcimg/tree.png alt / popacity:1/p /div div classdiv2 img classimg2 srcimg/tree.png alt / popacity:0.7/p /div div classdiv3 img classimg3 srcimg/tree.png alt / popacity:0.3/p /div div classdiv4 img classimg4 srcimg/tree.png alt / popacity:0.1/p /div /div /body/html 效果如下 3、带交互的透明度图像 这种交互也比较常见的比如jd 的这个把鼠标放在图片放上去之后是有一点点不透明度的， 0， 。
0， 该属性只对块级元素有效对行内元素无效， 0.1); } /style /head body div classmb-50 h1opacity属性的透明度/h1 div classcontainer container1 clearfix div classdiv1opacity1/div div classdiv2opacity0.7/div div classdiv3opacity0.3/div div classdiv4opacity0.1/div /div /div div h1rgba属性的透明度/h1 div classcontainer container2 clearfix div classdiv1rgba:1/div div classdiv2rgba:0.7/div div classdiv3rgba:0.3/div div classdiv4rgba:0.1/div /div /div /body/html 效果如下 是不是一目了然了rgba并不影响子级的透明度，在写小数值时一般来说保留 1~2 位小数即可， initial-scale1.0 / titleOpacity Example/title style /* 清除浮动样式 */ .clearfix::after { content: ; display: table; clear: both; } .mb-50 { margin-bottom: 50px; } .container div { float: left; width: 200px; height: 200px; font-size: 26px; text-align: center; line-height: 200px; margin-right: 30px; color: #333; font-weight: bold; } .container1 div { background-color: #f00; } .container1 .div1 { opacity: 1; } .container1 .div2 { opacity: 0.7; } .container1 .div3 { opacity: 0.3; } .container1 .div4 { opacity: 0.1; } .container2 .div1 { background: rgba(255， 那我们一起来看看吧， 0。
所以下面案例中文字的颜色也带上透明度了，这对于需要让元素半透明而保持内容不变的情况非常有用例如半透明的背景色或文本颜色， 0。
rgba 可以单独控制元素的背景颜色或文本颜色的透明度而不影响其内容的透明度， 一、opacity 属性 用于设置元素的不透明度取值范围为 0.0完全透明到 1.0完全不透明， !DOCTYPE htmlhtml langen head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width。
那来看 3 个小案例吧，其中R、G、B 通道表示颜色的三原色分量取值范围为 0 到 255 A 通道表示透明度取值范围为 0 到 10 表示完全透明1 表示完全不透明在写小数值时应该保留合理的小数位数一般来说保留 1~2 位小数即可， 二、rgba 属性 第一个 opacity属性会同时改变元素及其子级内容的透明度但有时候我们只需要改变作用元素的透明度那 rgba 属性就派上用场了。