目录
文章目录
一、这种方法适用在那种场景？
二、使用步骤
总结
前言
许多小伙伴在做前端背景时，改变透明度时会让页面的其他内容都变得透明，或者直接使用了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>
总结
本文介绍了怎样采用图片作为网页背景的方式。主要采用了定位的方式的解决一些背景的问题
3648
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
