css如何设置背景透明

2025-10-26
网站建设限时活动促销

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

css设置背景透明的方法:

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

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

2、在html文件找到一个

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

代码:

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><p class="tag-wrap mt mb lj-6qbl"> 标签: <span class="padding lj-aess"><a class="tags br lj-n130" target="_blank" href="/tags/44984.html" title="css教程">css教程</a></span> </p> <div class="art-copyright br mb lj-gvev"> <div><strong class="addr lj-myjt">本文地址:</strong><a target="_blank" href="/wenda/72334.html" title="css如何设置背景透明">/wenda/72334.html</a></div> <div><span class="copyright lj-0ru5">免责声明:</span>本站内容仅用于学习参考,信息和图片素材来源于互联网,如内容侵权与违规,请联系我们进行删除,我们将在三个工作日内处理。联系邮箱:chuangshanghai#qq.com(把#换成@)</div> </div> </div> </article> <div class="prev-next sb br mb clearfix lj-67wu"> <p class="post-prev fl ellipsis lj-nsi5"> <span class="prev lj-55oq">上一篇</span><strong><a href="/wenda/72333.html" title="PHP实现阳历转阴历的方法">PHP实现阳历转阴历的方法</a></strong> </p> <p class="post-next fr ellipsis lj-520g"> <span class="next lj-6kcz">下一篇</span><strong><a href="/wenda/72335.html" title="linux ping是什么意思">linux ping是什么意思</a></strong> </p> </div> <div class="related-art sb br mb lj-50sh"> <p class="c-title lj-sm2p"><span class="name lj-q1zw">其他文章</span></p> <ul class="ul clearfix lj-po5p"> <li><a target="_blank" href="/wenda/166034.html" title="电脑用哪个浏览器最好,推荐4款最好最快的电脑浏览器">电脑用哪个浏览器最好,推荐4款最好最快的电脑浏览器</a></li> <li><a target="_blank" href="/wenda/166033.html" title="开网店代理怎么找商家">开网店代理怎么找商家</a></li> <li><a target="_blank" href="/wenda/166032.html" title="拼多多推广怎么收费的?推广方法有哪些?">拼多多推广怎么收费的?推广方法有哪些?</a></li> <li><a target="_blank" href="/wenda/166031.html" title="46015是什么运营商,46099是哪个运营商">46015是什么运营商,46099是哪个运营商</a></li> <li><a target="_blank" href="/wenda/166028.html" title="淘宝宝贝淘口令怎么生成">淘宝宝贝淘口令怎么生成</a></li> <li><a target="_blank" href="/wenda/166026.html" title="解锁图案忘了怎么办(教你一招问题立马解决)">解锁图案忘了怎么办(教你一招问题立马解决)</a></li> <li><a target="_blank" href="/wenda/166022.html" title="中国推广网,中国推广网域名是什么">中国推广网,中国推广网域名是什么</a></li> <li><a target="_blank" href="/wenda/166020.html" title="性价比高的手机排行,2020年最值得入手的五款手机">性价比高的手机排行,2020年最值得入手的五款手机</a></li> <li><a target="_blank" href="/wenda/166017.html" title="天猫双11什么时候开始">天猫双11什么时候开始</a></li> <li><a target="_blank" href="/wenda/166011.html" title="淘宝买家信誉等级在哪里看">淘宝买家信誉等级在哪里看</a></li> <li><a target="_blank" href="/wenda/166010.html" title="b推是什么服务,啥叫b推">b推是什么服务,啥叫b推</a></li> <li><a target="_blank" href="/wenda/166005.html" title="SEO管家中心: 让您的网站脱颖而出的秘诀">SEO管家中心: 让您的网站脱颖而出的秘诀</a></li> <li><a target="_blank" href="/wenda/166003.html" title="如何申请百度联盟账号,如何申请百度联盟账号呢">如何申请百度联盟账号,如何申请百度联盟账号呢</a></li> <li><a target="_blank" href="/wenda/166002.html" title="v12发动机的车有哪些(盘点四款使用V12发动机的车)">v12发动机的车有哪些(盘点四款使用V12发动机的车)</a></li> <li><a target="_blank" href="/wenda/166001.html" title="惠普台式电脑怎么样(深度评测其质量及使用寿命)">惠普台式电脑怎么样(深度评测其质量及使用寿命)</a></li> <li><a target="_blank" href="/wenda/166000.html" title="如何申请成为百度新闻源,怎么写百度新闻赚钱">如何申请成为百度新闻源,怎么写百度新闻赚钱</a></li> <li><a target="_blank" href="/wenda/165997.html" title="拼多多测图的步骤是什么?如何测图?">拼多多测图的步骤是什么?如何测图?</a></li> <li><a target="_blank" href="/wenda/165994.html" title="十万左右的新车哪款好(3款10万左右口碑最好的车推荐)">十万左右的新车哪款好(3款10万左右口碑最好的车推荐)</a></li> <li><a target="_blank" href="/wenda/165993.html" title="白城360网站,白城百科">白城360网站,白城百科</a></li> <li><a target="_blank" href="/wenda/165992.html" title="淘宝红包雨秘诀是什么">淘宝红包雨秘诀是什么</a></li> </ul> </div> </div> <aside class="hidden-sm-md-lg fr lj-wk4l" id="sidebar" > <div class="theiaStickySidebar lj-szxv"> <section class="widget widget_aside_hot sb br mb lj-ylmv" id="aside_hot" > <p class="c-title mb lj-loax"><span class="name lj-q1zw">热门文章</span></p> <ul class="widget-content aside_hot lj-vpis"> <li class="clearfix lj-wqhu"><span class="list list-1 lj-05v2">1.</span><a target="_blank" href="/wenda/118310.html" title="抖音网红痞幼个人经历(不雅照片的真相和谣言)">抖音网红痞幼个人经历(不雅照片的真相和谣言)</a></li> <li class="clearfix lj-wqhu"><span class="list list-2 lj-pqe2">2.</span><a target="_blank" href="/wenda/24037.html" title="抖音业务全网最低价平台的网络卡是怎么回事?抖音自助下单">抖音业务全网最低价平台的网络卡是怎么回事?抖音自助下单</a></li> <li class="clearfix lj-wqhu"><span class="list list-3 lj-ag0m">3.</span><a target="_blank" href="/wenda/23833.html" title="为何我的抖音视频突然没有浏览量了?">为何我的抖音视频突然没有浏览量了?</a></li> <li class="clearfix lj-wqhu"><span class="list list-4 lj-dzf9">4.</span><a target="_blank" href="/wenda/132737.html" title="淘宝总部投诉电话9539怎么打?淘宝维护权人工电话是24小时么?">淘宝总部投诉电话9539怎么打?淘宝维护权人工电话是24小时么?</a></li> <li class="clearfix lj-wqhu"><span class="list list-5 lj-9gdw">5.</span><a target="_blank" href="/wenda/24251.html" title="升学e网通操作指南">升学e网通操作指南</a></li> <li class="clearfix lj-wqhu"><span class="list list-6 lj-od15">6.</span><a target="_blank" href="/wenda/3108.html" title="如何使用步步高电话子母机 步步高电话子母机使用方法">如何使用步步高电话子母机 步步高电话子母机使用方法</a></li> <li class="clearfix lj-wqhu"><span class="list list-7 lj-curw">7.</span><a target="_blank" href="/wenda/137591.html" title="微信好友来源显示对方通过搜索手机号添加是什么意思?">微信好友来源显示对方通过搜索手机号添加是什么意思?</a></li> <li class="clearfix lj-wqhu"><span class="list list-8 lj-k8uh">8.</span><a target="_blank" href="/wenda/25695.html" title="白事包怎么写封">白事包怎么写封</a></li> <li class="clearfix lj-wqhu"><span class="list list-9 lj-apjx">9.</span><a target="_blank" href="/wenda/132096.html" title="投诉京东的最狠方法有哪些?12315投诉京东几天解决">投诉京东的最狠方法有哪些?12315投诉京东几天解决</a></li> <li class="clearfix lj-wqhu"><span class="list list-10 lj-s807">10.</span><a target="_blank" href="/wenda/2350.html" title="如何用格式工厂转换MP3格式">如何用格式工厂转换MP3格式</a></li> </ul> </section> <section class="widget widget_aside_random sb br mb lj-kems" id="aside_random" > <p class="c-title mb lj-loax"><span class="name lj-q1zw">随机图文</span></p> <ul class="widget-content aside_random lj-empt"> <li class="list clearfix lj-fnf0"> <a target="_blank" href="/wenda/548.html" title="平方米符号怎么打【四种方法】"> <span class="img-wrap lj-b8sh"> <img class="img-cover br random-img lj-2xsd" src="/template/pc/static/t/158.jpg" title="平方米符号怎么打【四种方法】" alt="平方米符号怎么打【四种方法】"> </span> <div class="random-text lj-40by"> <p class="title lj-lk01">平方米符号怎么打【四种方法】</p> <div class="info lj-geez"> <span class="time lj-1jgj"><i class="iconfont icon-time lj-4n2k"></i>2024-07-10</span> <span class="comment lj-j5z7"><i class="iconfont icon-view lj-vt9k"></i>989</span> </div> </div> </a> </li> <li class="list clearfix lj-cpk7"> <a target="_blank" href="/wenda/69.html" title="怎么在网上买手机号"> <span class="img-wrap lj-8wfb"> <img class="img-cover br random-img lj-lrmd" src="/template/pc/static/t/5.jpg" title="怎么在网上买手机号" alt="怎么在网上买手机号"> </span> <div class="random-text lj-uyaq"> <p class="title lj-kz8h">怎么在网上买手机号</p> <div class="info lj-r2gl"> <span class="time lj-o3tc"><i class="iconfont icon-time lj-er6j"></i>2024-07-09</span> <span class="comment lj-j0m1"><i class="iconfont icon-view lj-tbsg"></i>988</span> </div> </div> </a> </li> <li class="list clearfix lj-sf4s"> <a target="_blank" href="/wenda/1001.html" title="电脑上不了网怎么办 电脑无法上网常用解决方法"> <span class="img-wrap lj-pqtx"> <img class="img-cover br random-img lj-q0ch" src="/template/pc/static/t/156.jpg" title="电脑上不了网怎么办 电脑无法上网常用解决方法" alt="电脑上不了网怎么办 电脑无法上网常用解决方法"> </span> <div class="random-text lj-o1qz"> <p class="title lj-mx32">电脑上不了网怎么办 电脑无法上网常用解决方法</p> <div class="info lj-2bw8"> <span class="time lj-b82k"><i class="iconfont icon-time lj-y3wx"></i>2024-07-10</span> <span class="comment lj-teac"><i class="iconfont icon-view lj-t4gz"></i>582</span> </div> </div> </a> </li> <li class="list clearfix lj-siee"> <a target="_blank" href="/wenda/524.html" title="怎么查手机号的快递"> <span class="img-wrap lj-o2k0"> <img class="img-cover br random-img lj-bcs7" src="/template/pc/static/t/52.jpg" title="怎么查手机号的快递" alt="怎么查手机号的快递"> </span> <div class="random-text lj-m6dy"> <p class="title lj-feu1">怎么查手机号的快递</p> <div class="info lj-39aq"> <span class="time lj-84u8"><i class="iconfont icon-time lj-ck66"></i>2024-07-10</span> <span class="comment lj-vlke"><i class="iconfont icon-view lj-ds7o"></i>508</span> </div> </div> </a> </li> <li class="list clearfix lj-mx0g"> <a target="_blank" href="/wenda/109.html" title="y470显卡无法切换如何解决"> <span class="img-wrap lj-ims0"> <img class="img-cover br random-img lj-0le2" src="/template/pc/static/t/116.jpg" title="y470显卡无法切换如何解决" alt="y470显卡无法切换如何解决"> </span> <div class="random-text lj-04wz"> <p class="title lj-l21r">y470显卡无法切换如何解决</p> <div class="info lj-hzv3"> <span class="time lj-4klb"><i class="iconfont icon-time lj-s29g"></i>2024-07-09</span> <span class="comment lj-xfq8"><i class="iconfont icon-view lj-6sid"></i>686</span> </div> </div> </a> </li> <li class="list clearfix lj-ay43"> <a target="_blank" href="/wenda/244.html" title="电脑常见故障的维修技巧是什么"> <span class="img-wrap lj-x4t9"> <img class="img-cover br random-img lj-2t53" src="/template/pc/static/t/63.jpg" title="电脑常见故障的维修技巧是什么" alt="电脑常见故障的维修技巧是什么"> </span> <div class="random-text lj-teh1"> <p class="title lj-l6s1">电脑常见故障的维修技巧是什么</p> <div class="info lj-b6g1"> <span class="time lj-xg79"><i class="iconfont icon-time lj-g1uj"></i>2024-07-09</span> <span class="comment lj-mw41"><i class="iconfont icon-view lj-e2g2"></i>898</span> </div> </div> </a> </li> <li class="list clearfix lj-fs0z"> <a target="_blank" href="/wenda/428.html" title="hd是什么意思"> <span class="img-wrap lj-am78"> <img class="img-cover br random-img lj-cw76" src="/template/pc/static/t/142.jpg" title="hd是什么意思" alt="hd是什么意思"> </span> <div class="random-text lj-5288"> <p class="title lj-df2x">hd是什么意思</p> <div class="info lj-01kc"> <span class="time lj-hnpm"><i class="iconfont icon-time lj-by94"></i>2024-07-09</span> <span class="comment lj-e662"><i class="iconfont icon-view lj-l5s5"></i>628</span> </div> </div> </a> </li> <li class="list clearfix lj-gef0"> <a target="_blank" href="/wenda/259.html" title="空调加氟怎么收费"> <span class="img-wrap lj-9ji7"> <img class="img-cover br random-img lj-suqp" src="/template/pc/static/t/147.jpg" title="空调加氟怎么收费" alt="空调加氟怎么收费"> </span> <div class="random-text lj-nws3"> <p class="title lj-jf7p">空调加氟怎么收费</p> <div class="info lj-6r7k"> <span class="time lj-c1xw"><i class="iconfont icon-time lj-w8y9"></i>2024-07-09</span> <span class="comment lj-ibj1"><i class="iconfont icon-view lj-sl5r"></i>585</span> </div> </div> </a> </li> <li class="list clearfix lj-oh9i"> <a target="_blank" href="/wenda/583.html" title="电脑键盘括号怎么打出来 电脑括号的输入方法"> <span class="img-wrap lj-abyt"> <img class="img-cover br random-img lj-s24y" src="/template/pc/static/t/37.jpg" title="电脑键盘括号怎么打出来 电脑括号的输入方法" alt="电脑键盘括号怎么打出来 电脑括号的输入方法"> </span> <div class="random-text lj-4t0b"> <p class="title lj-luuy">电脑键盘括号怎么打出来 电脑括号的输入方法</p> <div class="info lj-c8o1"> <span class="time lj-3lbz"><i class="iconfont icon-time lj-iap1"></i>2024-07-10</span> <span class="comment lj-nkvi"><i class="iconfont icon-view lj-6v1g"></i>933</span> </div> </div> </a> </li> <li class="list clearfix lj-ovoj"> <a target="_blank" href="/wenda/820.html" title="陌陌是什么"> <span class="img-wrap lj-qu4o"> <img class="img-cover br random-img lj-zx63" src="/template/pc/static/t/18.jpg" title="陌陌是什么" alt="陌陌是什么"> </span> <div class="random-text lj-1b4v"> <p class="title lj-214c">陌陌是什么</p> <div class="info lj-db5y"> <span class="time lj-u2ie"><i class="iconfont icon-time lj-1lni"></i>2024-07-10</span> <span class="comment lj-jamj"><i class="iconfont icon-view lj-ygnn"></i>835</span> </div> </div> </a> </li> </section> </div> </aside> </div> <footer class="footer lj-6kct"> <div class="main container lj-jrxa"> <div class="f-about fl lj-idzq"> <p class="title pb1 lj-9gok">网站推广.NET</p> <div class="intro lj-n4dm">网站推广.NET是一个专业的网站运营知识平台。网站主要提供互联网技术和教程,网站建设,网页设计,网络营销,SEO,网站运营等知识。</div> <small> <span>Copyright © <script>document.write(new Date().getFullYear());</script> 得一而生咨询-网站推广.NET 版权所有</span> <span class="icp lj-2j1l"><a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">黔ICP备2024019498号-2</a></span> </small> </div> <div class="f-contact fl lj-qm6h"> <p class="title pb1 lj-9i1r">联系方式</p> <div><p>合作或咨询</p> <p>邮箱:303555158@QQ.COM</p> </div> </div> <div class="f-qr fr lj-prsf"> <p class="title pb1 lj-qden">关注我们</p> <div><img class="img br lj-u45p" src="/template/pc/static/picture/qr.jpg" alt="二维码"/></div> </div> <div class="clear lj-jk2x"></div> </div> <div class="toolbar lj-7vtq" id="toolbar" > <div class="btn hidden sb br lj-e4iy" id="totop"><i class="iconfont icon-top lj-4g9h"></i></div> </div> </footer> <div class="mask-hidden transition lj-7tn5" 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> <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> <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> </body> </html></style>

标签: css教程

本文地址:https://www.lifejia.cn/news/212280.html

免责声明:本站内容仅用于学习参考,信息和图片素材来源于互联网,如内容侵权与违规,请联系我们进行删除,我们将在三个工作日内处理。联系邮箱:cloudinto#qq.com(把#换成@)