本教程操作环境：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-vbz0">
标签：
<span class="padding lj-2ucm"><a class="tags br lj-gonv" target="_blank" href="/tags/44984.html" title="css教程">css教程</a></span>
</p>
<div class="art-copyright br mb lj-avew">
<div><strong class="addr lj-50yh">本文地址：</strong><a target="_blank" href="/wenda/72334.html" title="css如何设置背景透明">/wenda/72334.html</a></div>
<div><span class="copyright lj-8t7u">免责声明：</span>本站内容仅用于学习参考，信息和图片素材来源于互联网，如内容侵权与违规，请联系我们进行删除，我们将在三个工作日内处理。联系邮箱：chuangshanghai#qq.com（把#换成@）</div>
</div>
</div>
</article>
<div class="prev-next sb br mb clearfix lj-bloa">
<p class="post-prev fl ellipsis lj-396o">
<span class="prev lj-bgmj">上一篇</span><strong><a href="/wenda/72333.html" title="PHP实现阳历转阴历的方法">PHP实现阳历转阴历的方法</a></strong>
</p>
<p class="post-next fr ellipsis lj-wsmk">
<span class="next lj-9tkl">下一篇</span><strong><a href="/wenda/72335.html" title="linux ping是什么意思">linux ping是什么意思</a></strong>
</p>
</div>
<div class="related-art sb br mb lj-7hez">
<p class="c-title lj-qudf"><span class="name lj-6d0a">其他文章</span></p>
<ul class="ul clearfix lj-xp0u">
<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-lg2z" id="sidebar" >
<div class="theiaStickySidebar lj-9f6w">
<section class="widget widget_aside_hot sb br mb lj-n3wz" id="aside_hot" >
<p class="c-title mb lj-h1ra"><span class="name lj-6d0a">热门文章</span></p>
<ul class="widget-content aside_hot lj-n1vr">
<li class="clearfix lj-2yby"><span class="list list-1 lj-w4v5">1.</span><a target="_blank" href="/wenda/118310.html" title="抖音网红痞幼个人经历（不雅照片的真相和谣言）">抖音网红痞幼个人经历（不雅照片的真相和谣言）</a></li>
<li class="clearfix lj-u6r5"><span class="list list-2 lj-14tm">2.</span><a target="_blank" href="/wenda/24037.html" title="抖音业务全网最低价平台的网络卡是怎么回事？抖音自助下单">抖音业务全网最低价平台的网络卡是怎么回事？抖音自助下单</a></li>
<li class="clearfix lj-nl57"><span class="list list-3 lj-l4tu">3.</span><a target="_blank" href="/wenda/23833.html" title="为何我的抖音视频突然没有浏览量了？">为何我的抖音视频突然没有浏览量了？</a></li>
<li class="clearfix lj-nl57"><span class="list list-4 lj-4akh">4.</span><a target="_blank" href="/wenda/132737.html" title="淘宝总部投诉电话9539怎么打？淘宝维护权人工电话是24小时么？">淘宝总部投诉电话9539怎么打？淘宝维护权人工电话是24小时么？</a></li>
<li class="clearfix lj-nl57"><span class="list list-5 lj-ctap">5.</span><a target="_blank" href="/wenda/24251.html" title="升学e网通操作指南">升学e网通操作指南</a></li>
<li class="clearfix lj-i0mr"><span class="list list-6 lj-vu5f">6.</span><a target="_blank" href="/wenda/3108.html" title="如何使用步步高电话子母机 步步高电话子母机使用方法">如何使用步步高电话子母机 步步高电话子母机使用方法</a></li>
<li class="clearfix lj-o6c6"><span class="list list-7 lj-kn9s">7.</span><a target="_blank" href="/wenda/137591.html" title="微信好友来源显示对方通过搜索手机号添加是什么意思?">微信好友来源显示对方通过搜索手机号添加是什么意思?</a></li>
<li class="clearfix lj-jtfs"><span class="list list-8 lj-83kz">8.</span><a target="_blank" href="/wenda/25695.html" title="白事包怎么写封">白事包怎么写封</a></li>
<li class="clearfix lj-20u4"><span class="list list-9 lj-c6s2">9.</span><a target="_blank" href="/wenda/132096.html" title="投诉京东的最狠方法有哪些？12315投诉京东几天解决">投诉京东的最狠方法有哪些？12315投诉京东几天解决</a></li>
<li class="clearfix lj-x2ak"><span class="list list-10 lj-bbi2">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-bmug" id="aside_random" >
<p class="c-title mb lj-2kuv"><span class="name lj-1yau">随机图文</span></p>
<ul class="widget-content aside_random lj-9vkd">
<li class="list clearfix lj-0gs5">
<a target="_blank" href="/wenda/548.html" title="平方米符号怎么打【四种方法】">
<span class="img-wrap lj-8pu4">
<img class="img-cover br random-img lj-1tcv" src="/template/pc/static/t/158.jpg" title="平方米符号怎么打【四种方法】" alt="平方米符号怎么打【四种方法】">
</span>
<div class="random-text lj-3o5h">
<p class="title lj-dung">平方米符号怎么打【四种方法】</p>
<div class="info lj-rmfy">
<span class="time lj-mao0"><i class="iconfont icon-time lj-smr4"></i>2024-07-10</span>
<span class="comment lj-6zyy"><i class="iconfont icon-view lj-yluv"></i>989</span>
</div>
</div>
</a>
</li>
<li class="list clearfix lj-ncqd">
<a target="_blank" href="/wenda/69.html" title="怎么在网上买手机号">
<span class="img-wrap lj-he27">
<img class="img-cover br random-img lj-m2bg" src="/template/pc/static/t/5.jpg" title="怎么在网上买手机号" alt="怎么在网上买手机号">
</span>
<div class="random-text lj-i2ed">
<p class="title lj-wnna">怎么在网上买手机号</p>
<div class="info lj-jpte">
<span class="time lj-r87l"><i class="iconfont icon-time lj-9xl8"></i>2024-07-09</span>
<span class="comment lj-jxgi"><i class="iconfont icon-view lj-qrnw"></i>988</span>
</div>
</div>
</a>
</li>
<li class="list clearfix lj-2bh1">
<a target="_blank" href="/wenda/1001.html" title="电脑上不了网怎么办 电脑无法上网常用解决方法">
<span class="img-wrap lj-2qkw">
<img class="img-cover br random-img lj-zc70" src="/template/pc/static/t/156.jpg" title="电脑上不了网怎么办 电脑无法上网常用解决方法" alt="电脑上不了网怎么办 电脑无法上网常用解决方法">
</span>
<div class="random-text lj-6gc0">
<p class="title lj-uvae">电脑上不了网怎么办 电脑无法上网常用解决方法</p>
<div class="info lj-xmx7">
<span class="time lj-u9ld"><i class="iconfont icon-time lj-ob6c"></i>2024-07-10</span>
<span class="comment lj-5ppd"><i class="iconfont icon-view lj-vnwq"></i>582</span>
</div>
</div>
</a>
</li>
<li class="list clearfix lj-yh6c">
<a target="_blank" href="/wenda/524.html" title="怎么查手机号的快递">
<span class="img-wrap lj-tbs8">
<img class="img-cover br random-img lj-wsby" src="/template/pc/static/t/52.jpg" title="怎么查手机号的快递" alt="怎么查手机号的快递">
</span>
<div class="random-text lj-ners">
<p class="title lj-t8xo">怎么查手机号的快递</p>
<div class="info lj-ytu2">
<span class="time lj-mvuq"><i class="iconfont icon-time lj-hm2m"></i>2024-07-10</span>
<span class="comment lj-zood"><i class="iconfont icon-view lj-h6wf"></i>508</span>
</div>
</div>
</a>
</li>
<li class="list clearfix lj-hv0e">
<a target="_blank" href="/wenda/109.html" title="y470显卡无法切换如何解决">
<span class="img-wrap lj-9n46">
<img class="img-cover br random-img lj-qzqv" src="/template/pc/static/t/116.jpg" title="y470显卡无法切换如何解决" alt="y470显卡无法切换如何解决">
</span>
<div class="random-text lj-fe9q">
<p class="title lj-eovx">y470显卡无法切换如何解决</p>
<div class="info lj-kac8">
<span class="time lj-1kem"><i class="iconfont icon-time lj-5yuz"></i>2024-07-09</span>
<span class="comment lj-xuun"><i class="iconfont icon-view lj-4vqz"></i>686</span>
</div>
</div>
</a>
</li>
<li class="list clearfix lj-6y69">
<a target="_blank" href="/wenda/244.html" title="电脑常见故障的维修技巧是什么">
<span class="img-wrap lj-3yq7">
<img class="img-cover br random-img lj-1dgh" src="/template/pc/static/t/63.jpg" title="电脑常见故障的维修技巧是什么" alt="电脑常见故障的维修技巧是什么">
</span>
<div class="random-text lj-jrr5">
<p class="title lj-id4y">电脑常见故障的维修技巧是什么</p>
<div class="info lj-v6mw">
<span class="time lj-4ia8"><i class="iconfont icon-time lj-mw1b"></i>2024-07-09</span>
<span class="comment lj-gwbj"><i class="iconfont icon-view lj-u8qx"></i>898</span>
</div>
</div>
</a>
</li>
<li class="list clearfix lj-34v1">
<a target="_blank" href="/wenda/428.html" title="hd是什么意思">
<span class="img-wrap lj-vkc9">
<img class="img-cover br random-img lj-qum8" src="/template/pc/static/t/142.jpg" title="hd是什么意思" alt="hd是什么意思">
</span>
<div class="random-text lj-j1uv">
<p class="title lj-claa">hd是什么意思</p>
<div class="info lj-wxib">
<span class="time lj-rdo8"><i class="iconfont icon-time lj-7xia"></i>2024-07-09</span>
<span class="comment lj-0m5l"><i class="iconfont icon-view lj-37s0"></i>628</span>
</div>
</div>
</a>
</li>
<li class="list clearfix lj-ko78">
<a target="_blank" href="/wenda/259.html" title="空调加氟怎么收费">
<span class="img-wrap lj-w4fz">
<img class="img-cover br random-img lj-5w24" src="/template/pc/static/t/147.jpg" title="空调加氟怎么收费" alt="空调加氟怎么收费">
</span>
<div class="random-text lj-fgdv">
<p class="title lj-wpst">空调加氟怎么收费</p>
<div class="info lj-mqv3">
<span class="time lj-qwxk"><i class="iconfont icon-time lj-t0js"></i>2024-07-09</span>
<span class="comment lj-g657"><i class="iconfont icon-view lj-i1r8"></i>585</span>
</div>
</div>
</a>
</li>
<li class="list clearfix lj-5c20">
<a target="_blank" href="/wenda/583.html" title="电脑键盘括号怎么打出来 电脑括号的输入方法">
<span class="img-wrap lj-02fb">
<img class="img-cover br random-img lj-tiel" src="/template/pc/static/t/37.jpg" title="电脑键盘括号怎么打出来 电脑括号的输入方法" alt="电脑键盘括号怎么打出来 电脑括号的输入方法">
</span>
<div class="random-text lj-o2o8">
<p class="title lj-yepz">电脑键盘括号怎么打出来 电脑括号的输入方法</p>
<div class="info lj-x3ru">
<span class="time lj-rh7y"><i class="iconfont icon-time lj-l1en"></i>2024-07-10</span>
<span class="comment lj-ekp0"><i class="iconfont icon-view lj-02px"></i>933</span>
</div>
</div>
</a>
</li>
<li class="list clearfix lj-wqu5">
<a target="_blank" href="/wenda/820.html" title="陌陌是什么">
<span class="img-wrap lj-0nfv">
<img class="img-cover br random-img lj-tzns" src="/template/pc/static/t/18.jpg" title="陌陌是什么" alt="陌陌是什么">
</span>
<div class="random-text lj-eemz">
<p class="title lj-o56c">陌陌是什么</p>
<div class="info lj-vxia">
<span class="time lj-94hp"><i class="iconfont icon-time lj-kfef"></i>2024-07-10</span>
<span class="comment lj-j1d9"><i class="iconfont icon-view lj-faya"></i>835</span>
</div>
</div>
</a>
</li>
</section>
</div>
</aside>
</div>
<footer class="footer lj-kts4">
<div class="main container lj-81cu">
<div class="f-about fl lj-bt9k">
<p class="title pb1 lj-5pie">网站推广.NET</p>
<div class="intro lj-hhmf">网站推广.NET是一个专业的网站运营知识平台。网站主要提供互联网技术和教程，网站建设，网页设计，网络营销，SEO，网站运营等知识。</div>
<small>
<span>Copyright © <script>document.write(new Date().getFullYear());</script> 得一而生咨询-网站推广.NET 版权所有</span>
<span class="icp lj-4ikm"><a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">黔ICP备2024019498号-2</a></span>
</small>
</div>
<div class="f-contact fl lj-z3v9">
<p class="title pb1 lj-kp0k">联系方式</p>
<div><p>合作或咨询</p>
<p>邮箱：303555158@QQ.COM</p>
</div>
</div>
<div class="f-qr fr lj-weo0">
<p class="title pb1 lj-zx52">关注我们</p>
<div><img class="img br lj-pcan" src="/template/pc/static/picture/qr.jpg" alt="二维码"/></div>
</div>
<div class="clear lj-fal1"></div>
</div>
<div class="toolbar lj-lolf" id="toolbar" >
<div class="btn hidden sb br lj-9jnm" id="totop"><i class="iconfont icon-top lj-rzn3"></i></div>
</div>
</footer>
<div class="mask-hidden transition lj-09pn" 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（把#换成@）
