CSS - background-attachment 属性_CSS 菜鸟教程

CSS background-attachment 属性确定图像在背景上的位置是在视口内固定，还是在其容器内滚动。

语法

background-attachment: scroll | fixed | local | initial | inherit;

属性值

值	描述
fixed	指定背景图像不会随页面滚动。
local	指定背景图像将随着元素的内容滚动
scroll	指定背景图像将与页面一起滚动。默认值。
initial	将属性设置为其初始值。
inherit	将继承父元素的属性。

CSS 背景附件示例

下面介绍了具有不同值的 background-attachment 属性的一些示例。

不滚动页面

为了防止背景图像滚动，我们使用值 fixed。以下示例演示了 background-attachment： fixed 属性，该属性修复相对于视口的背景图像

<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 .fixed {
	 	 	 	 	 	 background-image: url('images/logo.png');
	 	 	 	 	 	 background-repeat: no-repeat;
	 	 	 	 	 	 background-attachment: fixed;
	 	 	 	 	 	 background-position: left top;
	 	 	 	 	 	 background-color: lightblue;
	 	 	 	 	 	 background-size: 40% 30%;
	 	 	 	 	 	 padding: 5rem;
	 	 	 	 	 	 width: 800px;
	 	 	 	 	 	 height: 500px;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS background-attachment Property</h2>
	 	 <div class="fixed">
	 	 	 	 <p>
	 	 	 	 	 	 Lorem Ipsum is simply dummy text of the printing	
	 	 	 	 	 	 and typesetting industry. Lorem Ipsum has been the	
	 	 	 	 	 	 industry's standard dummy text ever since the 1500s,	
	 	 	 	 	 	 when an unknown printer took a galley of type and	
	 	 	 	 	 	 scrambled it to make a type specimen book.	
	 	 	 	 	 	 It has survived not only five centuries, but also	
	 	 	 	 	 	 the leap into electronic typesetting, remaining	
	 	 	 	 	 	 essentially unchanged. It was popularised in the	
	 	 	 	 	 	 1960s with the release of Letraset sheets containing	
	 	 	 	 	 	 Lorem Ipsum passages, and more recently with desktop	
	 	 	 	 	 	 publishing software like Aldus PageMaker including	
	 	 	 	 	 	 versions of Lorem Ipsum.
	 	 	 	 </p>
	 	 </div>
</body>

</html>

使用元素内容滚动

为了使背景图像与元素的内容一起滚动，我们使用局部值。以下示例演示了 background-attachment： scroll 属性，该属性将背景图像与内容一起滚动

<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 .scroll {
	 	 	 	 	 	 background-image: url('images/logo.png');
	 	 	 	 	 	 background-repeat: no-repeat;
	 	 	 	 	 	 background-attachment: local;
	 	 	 	 	 	 background-position: left top;
	 	 	 	 	 	 background-color: lightblue;
	 	 	 	 	 	 background-size: 40% 30%;
	 	 	 	 	 	 padding: 5rem;
	 	 	 	 	 	 width: 800px;
	 	 	 	 	 	 height: 500px;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS background-attachment Property</h2>
	 	 <div class="scroll">
	 	 	 	 <p>
	 	 	 	 	 	 Lorem Ipsum is simply dummy text of the printing	
	 	 	 	 	 	 and typesetting industry. Lorem Ipsum has been the	
	 	 	 	 	 	 industry's standard dummy text ever since the 1500s,	
	 	 	 	 	 	 when an unknown printer took a galley of type and	
	 	 	 	 	 	 scrambled it to make a type specimen book.	
	 	 	 	 	 	 It has survived not only five centuries, but also	
	 	 	 	 	 	 the leap into electronic typesetting, remaining	
	 	 	 	 	 	 essentially unchanged. It was popularised in the	
	 	 	 	 	 	 1960s with the release of Letraset sheets containing	
	 	 	 	 	 	 Lorem Ipsum passages, and more recently with desktop	
	 	 	 	 	 	 publishing software like Aldus PageMaker including	
	 	 	 	 	 	 versions of Lorem Ipsum.
	 	 	 	 </p>
	 	 </div>
</body>

</html>

随页面滚动

为了使背景图像与页面一起滚动，我们使用 scroll 值。以下示例演示了 background-attachment： scroll 属性，该属性相对于元素的内容修复背景图像

<!DOCTYPE html>
<html>

<head>
	 	 <style>
	 	 	 	 .local {
	 	 	 	 	 	 background-image: url('images/logo.png');
	 	 	 	 	 	 background-repeat: no-repeat;
	 	 	 	 	 	 background-attachment: scroll;
	 	 	 	 	 	 background-position: left top;
	 	 	 	 	 	 background-color: lightblue;
	 	 	 	 	 	 background-size: 40% 30%;
	 	 	 	 	 	 padding: 5rem;
	 	 	 	 	 	 width: 800px;
	 	 	 	 	 	 height: 500px;
	 	 	 	 }
	 	 </style>
</head>

<body>
	 	 <h2>CSS background-attachment Property</h2>
	 	 <div class="local">
	 	 	 	 <p>
	 	 	 	 	 	 Lorem Ipsum is simply dummy text of the printing	
	 	 	 	 	 	 and typesetting industry. Lorem Ipsum has been the	
	 	 	 	 	 	 industry's standard dummy text ever since the 1500s,	
	 	 	 	 	 	 when an unknown printer took a galley of type and	
	 	 	 	 	 	 scrambled it to make a type specimen book.	
	 	 	 	 	 	 It has survived not only five centuries, but also	
	 	 	 	 	 	 the leap into electronic typesetting, remaining	
	 	 	 	 	 	 essentially unchanged. It was popularised in the	
	 	 	 	 	 	 1960s with the release of Letraset sheets containing	
	 	 	 	 	 	 Lorem Ipsum passages, and more recently with desktop	
	 	 	 	 	 	 publishing software like Aldus PageMaker including	
	 	 	 	 	 	 versions of Lorem Ipsum.
	 	 	 	 </p>
	 	 </div>
</body>

</html>

支持的浏览器

属性
background-attachment	1.0	4.0	1.0	1.0	3.5

<< CSS - background 属性 CSS - background-blend-mode 属性 >>