本教程操作环境：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><p class="tag-wrap mt mb">
标签：
<span class="padding"><a class="tags br" target="_blank" href="http://wztg.gzzwz.com.cn/tags/44984.html" title="css教程">css教程</a></span>
</p>
<div class="art-copyright br mb">
<div><strong class="addr">本文地址：</strong><a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/72334.html" title="css如何设置背景透明">http://wztg.gzzwz.com.cn/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://wztg.gzzwz.com.cn/wenda/72333.html" title="PHP实现阳历转阴历的方法">PHP实现阳历转阴历的方法</a></strong>
</p>
<p class="post-next fr ellipsis">
<span class="next">下一篇</span><strong><a href="http://wztg.gzzwz.com.cn/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://wztg.gzzwz.com.cn/wenda/307073.html" title="wd硬盘损坏怎么修复">wd硬盘损坏怎么修复</a></li>
<li><a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/307072.html" title="继电器是一种根据什么来控制电路">继电器是一种根据什么来控制电路</a></li>
<li><a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/307069.html" title="如何轻松实现电脑wifi共享？">如何轻松实现电脑wifi共享？</a></li>
<li><a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/307066.html" title="iota币是什么币">iota币是什么币</a></li>
<li><a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/307062.html" title="醒图怎么换证件照的背景">醒图怎么换证件照的背景</a></li>
<li><a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/307057.html" title="怎么还原系统win7">怎么还原系统win7</a></li>
<li><a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/307056.html" title="创建一个新的空白桌面的方法">创建一个新的空白桌面的方法</a></li>
<li><a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/307055.html" title="计算机文件名与扩展名有哪些">计算机文件名与扩展名有哪些</a></li>
<li><a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/307054.html" title="电脑录音？">电脑录音？</a></li>
<li><a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/307053.html" title="wps图片怎么设置透明色_wps把图片半透明的方法">wps图片怎么设置透明色_wps把图片半透明的方法</a></li>
<li><a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/307051.html" title="卸载程序的文件名是什么？">卸载程序的文件名是什么？</a></li>
<li><a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/307049.html" title="如何在华硕电脑上使用U盘启动？">如何在华硕电脑上使用U盘启动？</a></li>
<li><a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/307048.html" title="显卡驱动怎么安 显卡驱动安到哪个盘">显卡驱动怎么安 显卡驱动安到哪个盘</a></li>
<li><a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/307047.html" title="word随意制作美丽字体的操作方法">word随意制作美丽字体的操作方法</a></li>
<li><a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/307045.html" title="抖音如何设置视频旋转">抖音如何设置视频旋转</a></li>
<li><a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/307044.html" title="lsk是什么币种">lsk是什么币种</a></li>
<li><a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/307042.html" title="word中粗箭头怎么打">word中粗箭头怎么打</a></li>
<li><a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/307040.html" title="百度输入法为什么是繁体字 百度输入法关闭繁体输入教程">百度输入法为什么是繁体字 百度输入法关闭繁体输入教程</a></li>
<li><a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/307039.html" title="如何登录安卓版QQ浏览器并启用隐身模式">如何登录安卓版QQ浏览器并启用隐身模式</a></li>
<li><a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/307034.html" title="打印机怎么双面打印pdf「详细讲解：PDF文件双面打印的方法」">打印机怎么双面打印pdf「详细讲解：PDF文件双面打印的方法」</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://wztg.gzzwz.com.cn/wenda/116719.html" title="无人面馆为什么消失了？是什么原因？">无人面馆为什么消失了？是什么原因？</a></li>
<li class="clearfix"><span class="list list-2">2.</span><a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/150690.html" title="恢复到刚刚看的小说页面？">恢复到刚刚看的小说页面？</a></li>
<li class="clearfix"><span class="list list-3">3.</span><a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/158908.html" title="女人衣服品牌前十名，这十个品牌平价且不俗气">女人衣服品牌前十名，这十个品牌平价且不俗气</a></li>
<li class="clearfix"><span class="list list-4">4.</span><a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/118310.html" title="抖音网红痞幼个人经历（不雅照片的真相和谣言）">抖音网红痞幼个人经历（不雅照片的真相和谣言）</a></li>
<li class="clearfix"><span class="list list-5">5.</span><a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/99440.html" title="kol是什么职业？">kol是什么职业？</a></li>
<li class="clearfix"><span class="list list-6">6.</span><a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/132737.html" title="淘宝总部投诉电话9539怎么打？淘宝维护权人工电话是24小时么？">淘宝总部投诉电话9539怎么打？淘宝维护权人工电话是24小时么？</a></li>
<li class="clearfix"><span class="list list-7">7.</span><a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/117027.html" title="北京三里屯工体夜店酒吧消费怎样(北京三里屯酒吧街攻略大全)">北京三里屯工体夜店酒吧消费怎样(北京三里屯酒吧街攻略大全)</a></li>
<li class="clearfix"><span class="list list-8">8.</span><a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/91547.html" title="中国移动保号8元套餐包含什么内容(中国移动8元套餐介绍明细)">中国移动保号8元套餐包含什么内容(中国移动8元套餐介绍明细)</a></li>
<li class="clearfix"><span class="list list-9">9.</span><a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/118792.html" title="和迅雷一样的下载工具有哪些(五款能够完美替代迅雷的软件分享)">和迅雷一样的下载工具有哪些(五款能够完美替代迅雷的软件分享)</a></li>
<li class="clearfix"><span class="list list-10">10.</span><a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/137733.html" title="微信摇骰子表情1至六点">微信摇骰子表情1至六点</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://wztg.gzzwz.com.cn/wenda/827.html" title="度娘是什么意思">
<span class="img-wrap">
<img class="img-cover br random-img" src="/template/pc/static/t/147.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>592</span>
</div>
</div>
</a>
</li>
<li class="list clearfix">
<a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/1001.html" title="电脑上不了网怎么办 电脑无法上网常用解决方法">
<span class="img-wrap">
<img class="img-cover br random-img" src="/template/pc/static/t/140.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>582</span>
</div>
</div>
</a>
</li>
<li class="list clearfix">
<a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/654.html" title="HD Tune pro硬盘检测工具怎么用">
<span class="img-wrap">
<img class="img-cover br random-img" src="/template/pc/static/t/25.jpg" title="HD Tune pro硬盘检测工具怎么用" alt="HD Tune pro硬盘检测工具怎么用">
</span>
<div class="random-text">
<p class="title">HD Tune pro硬盘检测工具怎么用</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>859</span>
</div>
</div>
</a>
</li>
<li class="list clearfix">
<a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/738.html" title="U盘如何在BIOS设置启动">
<span class="img-wrap">
<img class="img-cover br random-img" src="/template/pc/static/t/49.jpg" title="U盘如何在BIOS设置启动" alt="U盘如何在BIOS设置启动">
</span>
<div class="random-text">
<p class="title">U盘如何在BIOS设置启动</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>855</span>
</div>
</div>
</a>
</li>
<li class="list clearfix">
<a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/572.html" title="冰箱不制冷怎么回事 冰箱不制冷的常见原因及解决方案">
<span class="img-wrap">
<img class="img-cover br random-img" src="/template/pc/static/t/163.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>530</span>
</div>
</div>
</a>
</li>
<li class="list clearfix">
<a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/106.html" title="天语x90手机怎么样？天语x90参数配置如何">
<span class="img-wrap">
<img class="img-cover br random-img" src="/template/pc/static/t/10.jpg" title="天语x90手机怎么样？天语x90参数配置如何" alt="天语x90手机怎么样？天语x90参数配置如何">
</span>
<div class="random-text">
<p class="title">天语x90手机怎么样？天语x90参数配置如何</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>703</span>
</div>
</div>
</a>
</li>
<li class="list clearfix">
<a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/537.html" title="怎样查看自己的ip地址">
<span class="img-wrap">
<img class="img-cover br random-img" src="/template/pc/static/t/80.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>817</span>
</div>
</div>
</a>
</li>
<li class="list clearfix">
<a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/205.html" title="qq登不上是什么原因">
<span class="img-wrap">
<img class="img-cover br random-img" src="/template/pc/static/t/39.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>821</span>
</div>
</div>
</a>
</li>
<li class="list clearfix">
<a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/78.html" title="空调制热不好是什么原因 空调制热不好的原因及解决方案">
<span class="img-wrap">
<img class="img-cover br random-img" src="/template/pc/static/t/181.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>847</span>
</div>
</div>
</a>
</li>
<li class="list clearfix">
<a target="_blank" href="http://wztg.gzzwz.com.cn/wenda/104.html" title="联想乐Phone A520怎么刷机">
<span class="img-wrap">
<img class="img-cover br random-img" src="/template/pc/static/t/161.jpg" title="联想乐Phone A520怎么刷机" alt="联想乐Phone A520怎么刷机">
</span>
<div class="random-text">
<p class="title">联想乐Phone A520怎么刷机</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>523</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>
</body>
</html> 
