background-attachment属性值scroll、fixed和local的区别

木木木华

已于 2023-02-01 17:06:22 修改

阅读量1.3k

点赞数 2

分类专栏： css 文章标签： css css3

于 2023-02-01 17:05:54 首次发布

本文链接：https://blog.csdn.net/catascdd/article/details/109023419

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

首先看菜鸟教程中的解释：
scroll：背景图片随着页面的滚动而滚动，默认值
fixed：背景图片不会随着页面的滚动而滚动
local：背景图片会随着元素的内容滚动而滚动

代码结合实例说明
先看代码：
主要包含两个盒子，class=“one”，class=“two”，第一个盒子包含主要的内容，第二个盒子主要是为了撑开body，让浏览器窗口出现滚动条

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>cssDemo2</title> 
<style>
.one{
	height: 200px;
	overflow-y: auto;
	background-color: cornflowerblue;
	background-image:url('imgs/Koala.jpg');
	background-repeat:no-repeat;
	background-position:right top;
	background-size:163px 150px;
	margin-right:200px;
	background-attachment:scroll;
}
.two{
	height: 1000px;
}
</style>
</head>
<body>
	<div class="one">
		<h1>Hello World!</h1>
		<p>背景图片不重复，设置 position 实例。</p>
		<p>背景图片只显示一次，并与文本分开。</p>
		<p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
		<p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
		<p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
		<p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
	</div>
	<div class="two"></div>
</body>
</html>

background-attachment:scroll;
在这里插入图片描述
background-attachment:fixed;
当我把属性值改成fixed的时候，出了一个小插曲，我发现我的背景图片不见了。查了一下资料发现：当background-attachment:fixed;时，背景图片是贴着窗口的，也就是我代码中margin-right:200px;使得我的图片无法显示，注销掉就可以了。若是你没有设置margin-right:200px;，背景图片也没有显示，则可能是你的div的width设置的太小了，注销掉或者把width的值设置的比窗口的宽度大即可。
在这里插入图片描述

background-attachment:local;

总结：

	滚动内容所在元素的滚动条	滚动页面滚动条	描述
scroll	背景图片不滚动	背景图片滚动
fixed	背景图片不滚动	背景图片不滚动	此时背景图片贴着窗口
local	背景图片滚动	背景图片滚动