html中如何将图片作为背景，将背景透明而网页内容不透明
目录文章目录前言一、这种方法适用在那种场景？二、使用步骤1.作为全屏背景2.部分区域背景总结提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言许多小伙伴在做前端背景时，改变透明度时会让页面的其他内容都变得透明，或者直接使用了background这个标签，但是却无法将背景变得透明，出现这种情况，怎么办呢？提示
目录
文章目录
一、这种方法适用在那种场景？
二、使用步骤
总结
前言
许多小伙伴在做前端背景时，改变透明度时会让页面的其他内容都变得透明，或者直接使用了background这个标签，但是却无法将背景变得透明，出现这种情况，怎么办呢？
提示：以下是本篇文章正文内容，下面案例可供参考
一、这种方法适用在那种场景？
可以适用在任何需要背景的地方，可以作为全屏背景，也可以作为某个区域的背景
二、使用步骤
1.作为全屏背景
代码如下（示例）：
<style>
/*通用选择器，设置边距*/
*{
margin: 0;
padding: 0;
}
/*设置背景属性*/
.bj{
position: fixed; /*将图片固定，不随页面滚动*/
opacity: 1; /*修改透明度*/
height: 100%;
width: 100%;
z-index: -1; /*将图片放在最底层*/
}
</style>
在<body>中加入 <img class="bj" src=" " alt="">,就可以实现将图片作为背景并且还可以更改透明度
2.部分区域背景
代码如下（示例）：
<style>
.bj{
position: absolute;
opacity: 1;
height: 100%;
width: 100%;
z-index: -1;
}
.area{
height: 200px;
margin: 30px auto;
position: relative;
}
</style>
在<body>中的引用
<div class="area">
<img class="bj" src=" " alt="">
<p>游戏真好玩</p>
</div>
<div class="area">
<img class="bj" src=" " alt="">
<p>游戏真好玩</p>
</div>
<div class="area">
<img class="bj" src=" " alt="">
<p>游戏真好玩</p>
</div>
总结
本文介绍了怎样采用图片作为网页背景的方式。主要采用了定位的方式的解决一些背景的问题
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
18
0- 0
已为社区贡献1条内容
所有评论(0)