div背景透明如何实现?教你两个办�
Admin 2021-04-16 群英技术资�
1. 通过opacity属性设置,取�0~1,0表示透明�1表示不透明,但是这种方法会把div上的内容也同时进行透明设置�
效果如下�
2.通过rgba格式的background-color设置,格式为:background-color:rgba(0,0,0,0~1)�0表示透明�1表示不透明�
代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .id{ width: 600px; height: 300px; } .tm1{ margin: 40 auto; text-align: center; line-height: 200px; width: 800px; height: 200px; background-color: yellow; opacity: 0.6; } .tm2{ margin: 40 auto; text-align: center; line-height: 200px; width: 800px; height: 200px; background-color: rgba(255, 255, 0, 0.5); } </style> </head> <body> <!--背景div--> <div class="id"> <!--透明div方法一--> <div class="tm1">透明div方法一,通过opacity设置透明度,div上的文字也透明:opacity: 0.6;</div><br> <!--透明div方法�--> <div class="tm2">透明div方法�,通过rgba设置透明�,div上面的文字不透明:background-color:rgba(255,0,0,0.5);</div> </div> </body> </html>
这里还有一点要注意�:rgba() 函数使用红®、绿(G)、蓝(B)、透明�(A)的叠加来生成各式各样的颜色�
RGBA 即红色、绿色、蓝色、透明度(英语:Red, Green, Blue、Alpha)�
红色(R�0 � 255 间的整数,代表颜色中的红色成分。�
绿色(G�0 � 255 间的整数,代表颜色中的绿色成分�
蓝色(B�0 � 255 间的整数,代表颜色中的蓝色成分�
透明度(A)取� 0~1 之间� 代表透明度�
可以百度百科查找rgba�.
类似�:
以上就是实现div背景透明的示例介绍,对新手来说本文有一定的参考价值,希望对大家学习有帮助�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
这篇文章主要介绍了html中使用vue-router的示例代�,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
CSS悬停缩放的效果怎样实现?CSS悬停缩放的效果就是当鼠标悬停在图片上方的时候,图片会放大展示,当鼠标离开图片上方时,图片缩小。这样的效果还是比较常见的,例如一下图片网站,电商网站等等都会使用到。接下来我们就来看看这一效果是怎样做的,下文有实现效果及代码,需要的朋友可以参考�
这篇文章主要介绍了css3实现椭圆轨迹旋转的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
css清除边距的方法:1、利用margin属性清除元素的外边距,语法为“元素{margin:0px;}”;2、利用padding属性清除元素内边距,语法为“元素{padding:0px;}”�
方法�1、用animation属性给元素绑定动画�2、用“@keyframes 名称{100%{transform:rotate(旋转角度)translate(位移距离);}}”语句设置元素的旋转和位移的动作关键帧,实现旋转加位移动画效果�
推荐内容
联系我们
24小时售后 � 24小时售后TEL�0668-2555666 售前咨询TEL�400-678-4567 投诉建议TEL�0668-2555999 投诉建议邮箱:t[email protected] 信息安全TEL�0668-2555118 域名空间客服 � 公司总机�0668-2555555 公司传真�0668-2555000Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所� 茂名市群英网络有限公�
增值电信经营许可证 : B1.B2-20140078