关于css中的 background-attachment 属性详解
<h2>1、background-attachment的官方说明</h2><p>设置背景图像是否固定或者随着页面的其余部分滚动</p>
<p>这句话很简洁，简洁到我无法去理解，所以我决定用我自己的想法去理解。</p>
<h2>2、background-attachment的值</h2>
<p>background-attachment有三个值：</p>
<ul><li>scroll：背景图片随着页面的滚动而滚动，这是默认的。</li><li>fixed：背景图片不会随着页面的滚动而滚动。</li><li>local：背景图片会随着元素内容的滚动而滚动。</li></ul>
<h2>3、关于个人的理解</h2>
<p>大家先来看看我的html代码：</p>
<div class="jb51code"><pre class="brush:xhtml;"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div class="div1">
<p>1</p><p>1</p>
<p>1</p><p>1</p>
<p>1</p><p>1</p>
<p>1</p><p>1</p>
<p>1</p><p>1</p>
<p>1</p><p>1</p>
<p>1</p><p>1</p>
<p>1</p><p>1</p>
<p>1</p><p>1</p>
</div>
<div class="div2"></div>
<style>
.div1 {
background-image: url("../img/qier.png");
width: 100px;
height: 400px;
overflow: scroll;
}
.div2{
background-color: white;
width: 100px;
height: 3000px;
}
</style>
</body>
</html></pre></div>
<p>大家可以看见，这个html里面有两个div，第一个div里面有很多p标签，目的是为了让overflow:scroll 能起作用，同时也设置宽高和一张背景图片（像素为100*100）。第二个div，目的为了让窗口可以滚动。</p>
<p>大家也可以直接复制我的代码去看看效果。</p>
<p>页面效果如下：</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202310/2023101016324573.png" /></p>
<p>可以看见，盒子内部和窗口都可以滚动</p>
<h3> 3.1、默认值 scroll</h3>
<p>背景图片随着页面的滚动而滚动</p>
<p>当我们滚动div里面的滚动条时，发现图片不会动</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202310/2023101016324574.png" /></p>
<p>而当我们滚动窗口的滚动条时，发现图片会跟着动</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202310/2023101016324575.png" /></p>
<p>这就是 background-attachment:scroll 的效果</p>
<h3>3.2、fixed</h3>
<p>背景图片不会随着页面的滚动而滚动</p>
<p>我们给予div background-attachment:fixed 属性</p>
<div class="jb51code"><pre class="brush:css;"> .div1 {
background-image: url("../img/qier.png");
width: 100px;
height: 400px;
overflow: scroll;
background-attachment: fixed;
}</pre></div>
<p>我们保存刷新页面，然后继续进行上面的操作</p>
<p>当我们滚动div里面的滚动条时，发现图片还是不会动。</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202310/2023101016324576.png" /></p>
<p>而当我们滚动窗口的滚动条时，发现图片不会跟着动，而是固定在窗口一样</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202310/2023101016324677.png" /></p>
<p>这就是 background-attachment:fixed 的效果</p>
<h3>3.3、local</h3>
<p>背景图片会随着元素内容的滚动而滚动</p>
<p>我们给予div background-attachment:local 属性</p>
<div class="jb51code"><pre class="brush:css;"> .div1 {
background-image: url("../img/qier.png");
width: 100px;
height: 400px;
overflow: scroll;
background-attachment: local;
}</pre></div>
<p>我们保存刷新页面，然后继续进行上面的操作</p>
<p>当我们滚动div里面的滚动条时，发现图片会跟着动。</p>
<p style="text-align:center"><img alt="" src="https://img.jbzj.com/file_images/article/202310/2023101016324678.png" /></p>
<p> 而当我们滚动窗口的滚动条时，发现图片也会跟着动</p>
<p>这就是 background-attachment:local 的效果</p>
<h2>4、个人总结</h2>
<p>background-attachment的值，以及相对于的效果相信大家已经感受到了，实践出真知，动手操作一遍就懂了。</p>
<p>在日常的使用中，还是background-attachment:fixed 使用的最多，因为这个属性更多的时候是跟background-image等 背景相关的属性一起使用，目的更多的是设置背景图，而一般背景图是固定的，不会随窗口的滚动而滚动，就像是“镶”在窗口的一样，所以background-attachment:fixed 是我学习和工作以来使用最多的，而其他的几乎没有使用的机会（也可能是我个人的接触有限）。</p>
頁:
[1]