网站推广.NET

网站推广.NET

css如何设置背景透明

来源:互联网

本教程操作环境:windows10系统、css3版,DELL G3电脑,该方法适用于所有品牌电脑。

css设置背景透明的方法:

1、创建一个html文件。如图

立即学习“前端免费学习笔记(深入)”;

2、在html文件找到一个

标签,在这个标签里创建一个标签并添加一个类,在这把这个类设置为:rgba。 如图

代码:

<p class="rgba"></p>

3、为p添加样式。在标签后面创建一个<style>,在<style>标签里设置rgba类的高和背景透明度的样式(rgba(R,G,B,A))。透明度参数,取值在0~1之间,不可为负值,透明度参数越小透明度越高。如图</p><p>代码:</p><pre ><style type="text/css">.rgba{background-color: rgba(0,0,0,0.5);height: 200px;}</style></pre><p>4、保存后使用浏览器查看。可以看到当透明度为由0.1修改为1时p背景由灰色变为了黑色。如图:</p><div style="margin-bottom:2em;"> <a target="_blank" href="http://www.wztg.net/tags/44984.html" title="css教程">css教程</a> </div> <div class="art-copyright br mb"> <div><strong class="addr">本文地址:</strong><a target="_blank" href="http://www.wztg.net/wenda/72334.html" title="css如何设置背景透明">http://www.wztg.net/wenda/72334.html</a></div> <div><span class="copyright">免责声明:</span>本站内容仅用于学习参考,信息和图片素材来源于互联网,如内容侵权与违规,请联系我们进行删除,我们将在三个工作日内处理。联系邮箱:chuangshanghai#qq.com(把#换成@)</div> </div> </div> </article> <div class="prev-next sb br mb clearfix"> <p class="post-prev fl ellipsis"> <span class="prev">上一篇</span><strong><a href="http://www.wztg.net/wenda/72333.html" title="PHP实现阳历转阴历的方法">PHP实现阳历转阴历的方法</a></strong> </p> <p class="post-next fr ellipsis"> <span class="next">下一篇</span><strong><a href="http://www.wztg.net/wenda/72335.html" title="linux ping是什么意思">linux ping是什么意思</a></strong> </p> </div> <div class="related-art sb br mb"> <p class="c-title"><span class="name">其他文章</span></p> <ul class="ul clearfix"> <li><a target="_blank" href="http://www.wztg.net/wenda/118593.html" title="欧莱雅肌底液效果好吗(小黑瓶肌底液测评)">欧莱雅肌底液效果好吗(小黑瓶肌底液测评)</a></li> <li><a target="_blank" href="http://www.wztg.net/wenda/118592.html" title="去日本旅游怎么办签证?需要多少钱?">去日本旅游怎么办签证?需要多少钱?</a></li> <li><a target="_blank" href="http://www.wztg.net/wenda/118589.html" title="朝阳大悦城美食怎么样(朝阳大悦城逛街美食攻略)">朝阳大悦城美食怎么样(朝阳大悦城逛街美食攻略)</a></li> <li><a target="_blank" href="http://www.wztg.net/wenda/118588.html" title="喜茶奶茶哪个好喝(很受欢迎的9款奶茶推荐)">喜茶奶茶哪个好喝(很受欢迎的9款奶茶推荐)</a></li> <li><a target="_blank" href="http://www.wztg.net/wenda/118585.html" title="承兑汇票是什么意思?具体怎么用?">承兑汇票是什么意思?具体怎么用?</a></li> <li><a target="_blank" href="http://www.wztg.net/wenda/118581.html" title="整车运输是什么意思(整车运输和零担运输的区别)">整车运输是什么意思(整车运输和零担运输的区别)</a></li> <li><a target="_blank" href="http://www.wztg.net/wenda/118578.html" title="京东关键词怎么优化?如何操作?">京东关键词怎么优化?如何操作?</a></li> <li><a target="_blank" href="http://www.wztg.net/wenda/118576.html" title="圆通航空怎么样?圆通有自己的航空飞机吗?">圆通航空怎么样?圆通有自己的航空飞机吗?</a></li> <li><a target="_blank" href="http://www.wztg.net/wenda/118575.html" title="有哪些经典的香水推荐(三大必买香水)">有哪些经典的香水推荐(三大必买香水)</a></li> <li><a target="_blank" href="http://www.wztg.net/wenda/118574.html" title="汽车销售客户接待流程及话术(汽车销售流程及顾客对话话术)">汽车销售客户接待流程及话术(汽车销售流程及顾客对话话术)</a></li> <li><a target="_blank" href="http://www.wztg.net/wenda/118573.html" title="娜丽丝防晒喷雾怎么样(邓伦同款防晒喷雾测评)">娜丽丝防晒喷雾怎么样(邓伦同款防晒喷雾测评)</a></li> <li><a target="_blank" href="http://www.wztg.net/wenda/118572.html" title="唇膏哪个牌子好用(5款好用又健康唇膏)">唇膏哪个牌子好用(5款好用又健康唇膏)</a></li> <li><a target="_blank" href="http://www.wztg.net/wenda/118569.html" title="宠物跟踪器有什么用?哪个牌子好用?">宠物跟踪器有什么用?哪个牌子好用?</a></li> <li><a target="_blank" href="http://www.wztg.net/wenda/118568.html" title="电子面单打印偏了怎么设置,一招教你如何解决!">电子面单打印偏了怎么设置,一招教你如何解决!</a></li> <li><a target="_blank" href="http://www.wztg.net/wenda/118567.html" title="电子商务主要学什么(电子商务就业方向)">电子商务主要学什么(电子商务就业方向)</a></li> <li><a target="_blank" href="http://www.wztg.net/wenda/118564.html" title="如何申请专利(申请专利详细步骤)">如何申请专利(申请专利详细步骤)</a></li> <li><a target="_blank" href="http://www.wztg.net/wenda/118563.html" title="什么是可穿戴设备?可穿戴设备有哪些?">什么是可穿戴设备?可穿戴设备有哪些?</a></li> <li><a target="_blank" href="http://www.wztg.net/wenda/118562.html" title="什么是融资融券?普通股民如何玩转融资融券?">什么是融资融券?普通股民如何玩转融资融券?</a></li> <li><a target="_blank" href="http://www.wztg.net/wenda/118561.html" title="创业融资的渠道有哪些?详解6种创业融资渠道">创业融资的渠道有哪些?详解6种创业融资渠道</a></li> <li><a target="_blank" href="http://www.wztg.net/wenda/118558.html" title="洛克菲勒家族到底有多少钱?总资产是多少?">洛克菲勒家族到底有多少钱?总资产是多少?</a></li> </ul> </div> </div> <aside class="hidden-sm-md-lg fr" id="sidebar" > <div class="theiaStickySidebar"> <section class="widget widget_aside_hot sb br mb" id="aside_hot" > <p class="c-title mb"><span class="name">热门文章</span></p> <ul class="widget-content aside_hot"> <li class="clearfix"><span class="list list-1">1.</span><a target="_blank" href="http://www.wztg.net/wenda/24037.html" title="抖音业务全网最低价平台的网络卡是怎么回事?抖音自助下单">抖音业务全网最低价平台的网络卡是怎么回事?抖音自助下单</a></li> <li class="clearfix"><span class="list list-2">2.</span><a target="_blank" href="http://www.wztg.net/wenda/23833.html" title="为何我的抖音视频突然没有浏览量了?">为何我的抖音视频突然没有浏览量了?</a></li> <li class="clearfix"><span class="list list-3">3.</span><a target="_blank" href="http://www.wztg.net/wenda/24251.html" title="升学e网通操作指南">升学e网通操作指南</a></li> <li class="clearfix"><span class="list list-4">4.</span><a target="_blank" href="http://www.wztg.net/wenda/3108.html" title="如何使用步步高电话子母机 步步高电话子母机使用方法">如何使用步步高电话子母机 步步高电话子母机使用方法</a></li> <li class="clearfix"><span class="list list-5">5.</span><a target="_blank" href="http://www.wztg.net/wenda/14843.html" title="智能家居产品有哪些">智能家居产品有哪些</a></li> <li class="clearfix"><span class="list list-6">6.</span><a target="_blank" href="http://www.wztg.net/wenda/2350.html" title="如何用格式工厂转换MP3格式">如何用格式工厂转换MP3格式</a></li> <li class="clearfix"><span class="list list-7">7.</span><a target="_blank" href="http://www.wztg.net/wenda/1066.html" title="space是哪个键 各种电脑键位名称及功用详解">space是哪个键 各种电脑键位名称及功用详解</a></li> <li class="clearfix"><span class="list list-8">8.</span><a target="_blank" href="http://www.wztg.net/wenda/13689.html" title="小米云服务怎么开启 小米云服务开启步骤">小米云服务怎么开启 小米云服务开启步骤</a></li> <li class="clearfix"><span class="list list-9">9.</span><a target="_blank" href="http://www.wztg.net/wenda/2114.html" title="电脑显示屏不显示是怎么回事 电脑显示屏不显示如何解决">电脑显示屏不显示是怎么回事 电脑显示屏不显示如何解决</a></li> <li class="clearfix"><span class="list list-10">10.</span><a target="_blank" href="http://www.wztg.net/wenda/5328.html" title="起点读书更新提醒怎么设置 起点读书更新提醒设置方法">起点读书更新提醒怎么设置 起点读书更新提醒设置方法</a></li> </ul> </section> <section class="widget widget_aside_random sb br mb" id="aside_random" > <p class="c-title mb"><span class="name">随机图文</span></p> <ul class="widget-content aside_random"> <li class="list clearfix"> <a target="_blank" href="http://www.wztg.net/wenda/537.html" title="怎样查看自己的ip地址"> <span class="img-wrap"> <img class="img-cover br random-img" src="/template/pc/static/t/102.jpg" title="怎样查看自己的ip地址" alt="怎样查看自己的ip地址"> </span> <div class="random-text"> <p class="title">怎样查看自己的ip地址</p> <div class="info"> <span class="time"><i class="iconfont icon-time"></i>2024-07-10</span> <span class="comment"><i class="iconfont icon-view"></i>816</span> </div> </div> </a> </li> <li class="list clearfix"> <a target="_blank" href="http://www.wztg.net/wenda/466.html" title="qq密码怎么更改"> <span class="img-wrap"> <img class="img-cover br random-img" src="/template/pc/static/t/80.jpg" title="qq密码怎么更改" alt="qq密码怎么更改"> </span> <div class="random-text"> <p class="title">qq密码怎么更改</p> <div class="info"> <span class="time"><i class="iconfont icon-time"></i>2024-07-09</span> <span class="comment"><i class="iconfont icon-view"></i>867</span> </div> </div> </a> </li> <li class="list clearfix"> <a target="_blank" href="http://www.wztg.net/wenda/815.html" title="rm是什么文件格式?.rm文件怎么打开?"> <span class="img-wrap"> <img class="img-cover br random-img" src="/template/pc/static/t/136.jpg" title="rm是什么文件格式?.rm文件怎么打开?" alt="rm是什么文件格式?.rm文件怎么打开?"> </span> <div class="random-text"> <p class="title">rm是什么文件格式?.rm文件怎么打开?</p> <div class="info"> <span class="time"><i class="iconfont icon-time"></i>2024-07-10</span> <span class="comment"><i class="iconfont icon-view"></i>996</span> </div> </div> </a> </li> <li class="list clearfix"> <a target="_blank" href="http://www.wztg.net/wenda/73.html" title="苹果手机怎么激活新机"> <span class="img-wrap"> <img class="img-cover br random-img" src="/template/pc/static/t/109.jpg" title="苹果手机怎么激活新机" alt="苹果手机怎么激活新机"> </span> <div class="random-text"> <p class="title">苹果手机怎么激活新机</p> <div class="info"> <span class="time"><i class="iconfont icon-time"></i>2024-07-09</span> <span class="comment"><i class="iconfont icon-view"></i>660</span> </div> </div> </a> </li> <li class="list clearfix"> <a target="_blank" href="http://www.wztg.net/wenda/35.html" title="联想k860i怎么样?好不好?"> <span class="img-wrap"> <img class="img-cover br random-img" src="/template/pc/static/t/58.jpg" title="联想k860i怎么样?好不好?" alt="联想k860i怎么样?好不好?"> </span> <div class="random-text"> <p class="title">联想k860i怎么样?好不好?</p> <div class="info"> <span class="time"><i class="iconfont icon-time"></i>2024-07-09</span> <span class="comment"><i class="iconfont icon-view"></i>600</span> </div> </div> </a> </li> <li class="list clearfix"> <a target="_blank" href="http://www.wztg.net/wenda/888.html" title="电脑键盘怎么打顿号"> <span class="img-wrap"> <img class="img-cover br random-img" src="/template/pc/static/t/169.jpg" title="电脑键盘怎么打顿号" alt="电脑键盘怎么打顿号"> </span> <div class="random-text"> <p class="title">电脑键盘怎么打顿号</p> <div class="info"> <span class="time"><i class="iconfont icon-time"></i>2024-07-10</span> <span class="comment"><i class="iconfont icon-view"></i>877</span> </div> </div> </a> </li> <li class="list clearfix"> <a target="_blank" href="http://www.wztg.net/wenda/368.html" title="win10系统如何关闭百度云盘开机自启功能 win10系统关闭百度云盘开机自启功能方法"> <span class="img-wrap"> <img class="img-cover br random-img" src="/template/pc/static/t/118.jpg" title="win10系统如何关闭百度云盘开机自启功能 win10系统关闭百度云盘开机自启功能方法" alt="win10系统如何关闭百度云盘开机自启功能 win10系统关闭百度云盘开机自启功能方法"> </span> <div class="random-text"> <p class="title">win10系统如何关闭百度云盘开机自启功能 win10系统关闭百度云盘开机自启功能方法</p> <div class="info"> <span class="time"><i class="iconfont icon-time"></i>2024-07-09</span> <span class="comment"><i class="iconfont icon-view"></i>634</span> </div> </div> </a> </li> <li class="list clearfix"> <a target="_blank" href="http://www.wztg.net/wenda/811.html" title="打孔器怎么用"> <span class="img-wrap"> <img class="img-cover br random-img" src="/template/pc/static/t/151.jpg" title="打孔器怎么用" alt="打孔器怎么用"> </span> <div class="random-text"> <p class="title">打孔器怎么用</p> <div class="info"> <span class="time"><i class="iconfont icon-time"></i>2024-07-10</span> <span class="comment"><i class="iconfont icon-view"></i>525</span> </div> </div> </a> </li> <li class="list clearfix"> <a target="_blank" href="http://www.wztg.net/wenda/789.html" title="无线路由怎么设置 设置无线路由器方法"> <span class="img-wrap"> <img class="img-cover br random-img" src="/template/pc/static/t/162.jpg" title="无线路由怎么设置 设置无线路由器方法" alt="无线路由怎么设置 设置无线路由器方法"> </span> <div class="random-text"> <p class="title">无线路由怎么设置 设置无线路由器方法</p> <div class="info"> <span class="time"><i class="iconfont icon-time"></i>2024-07-10</span> <span class="comment"><i class="iconfont icon-view"></i>790</span> </div> </div> </a> </li> <li class="list clearfix"> <a target="_blank" href="http://www.wztg.net/wenda/803.html" title="加快迅雷下载速度"> <span class="img-wrap"> <img class="img-cover br random-img" src="/template/pc/static/t/29.jpg" title="加快迅雷下载速度" alt="加快迅雷下载速度"> </span> <div class="random-text"> <p class="title">加快迅雷下载速度</p> <div class="info"> <span class="time"><i class="iconfont icon-time"></i>2024-07-10</span> <span class="comment"><i class="iconfont icon-view"></i>989</span> </div> </div> </a> </li> </section> </div> </aside> </div> <footer class="footer"> <div class="main container"> <div class="f-about fl"> <p class="title pb1">网站推广.NET</p> <div class="intro">网站推广.NET是一个专业的网站运营知识平台。网站主要提供互联网技术和教程,网站建设,网页设计,网络营销,SEO,网站运营等知识。</div> <small> <span>Copyright © <script>document.write(new Date().getFullYear());</script> 得一而生咨询-网站推广.NET 版权所有</span> <span class="icp"><a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">黔ICP备2024019498号-2</a></span> </small> </div> <div class="f-contact fl"> <p class="title pb1">联系方式</p> <div><p>合作或咨询</p> <p>邮箱:303555158@QQ.COM</p> </div> </div> <div class="f-qr fr"> <p class="title pb1">关注我们</p> <div><img class="img br" src="/template/pc/static/picture/qr.jpg" alt="二维码"/></div> </div> <div class="clear"></div> </div> <div class="toolbar" id="toolbar" > <div class="btn hidden sb br" id="totop"><i class="iconfont icon-top"></i></div> </div> </footer> <!--黑色透明遮罩--> <div class="mask-hidden transition" id="mask-hidden"></div> <script src="/template/pc/static/js/common.js" type="text/javascript"></script> <script src="/template/pc/static/js/dark-mode.js"></script> <script src="/template/pc/static/js/jquery.cookie.min.js"></script> <!--初始化Swiper--> <script> var swiper = new Swiper('.swiper-container', { pagination: '.swiper-pagination', nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', centeredSlides: true, autoplay: 3500, slidesPerView: 1, paginationClickable: true, autoplayDisableOnInteraction: false, spaceBetween: 0, loop: true }); </script> <!--分页方式--> <!--[if lt IE 9]> <script src="/template/pc/static/js/html5-css3.js"></script> <![endif]--> <script> //百度提交代码 (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <script type="text/javascript">var root_dir="";var ey_aid=72334;</script> <script language="javascript" type="text/javascript" src="http://www.wztg.net/public/static/common/js/ey_footer.js?v=v1.6.9"></script> </body> </html>