CSS background-attachment
CSS background-attachment
CSS background-attachment用于指定背景图像是固定的还是在浏览器窗口中与页面的其余部分一起滚动。
此属性具有三个值：
scroll、fixed、local。其默认值为
scroll ，这将导致元素不随内容滚动。此属性的
local 值使元素随内容滚动。如果将值设置为
fixed，则在浏览器中滚动时背景图像将不会移动
scroll、fixed、local。其默认值为
scroll ，这将导致元素不随内容滚动。此属性的
local 值使元素随内容滚动。如果将值设置为
fixed，则在浏览器中滚动时背景图像将不会移动
此
CSS属性可以支持多个背景图像。我们可以为每个背景图像指定不同的
background-attachment 属性值，以逗号分隔。每个图像都将与此属性的相应值匹配。
CSS属性可以支持多个背景图像。我们可以为每个背景图像指定不同的
background-attachment 属性值，以逗号分隔。每个图像都将与此属性的相应值匹配。
语法
background-attachment: scroll | fixed | local | initial | inherit;
此属性的值定义如下。
属性值
scroll：这是默认值。
fixed：背景图像不会随元素一起移动，即使元素具有滚动机制。
local：如果元素具有滚动机制，则背景图像将被锁定在一个位置，甚至文档的其余部分也将滚动。滚动元素的内容。
initial：将属性设置为其默认值。
inherit： 它从其父元素继承属性。
下面我们通过一些示例来了解这些属性。
示例
在此示例中，我们是使用
background-attachment 属性的
scroll 值，这是默认行为。因此，在滚动页面时，背景也会随之滚动。
background-attachment 属性的
scroll 值，这是默认行为。因此，在滚动页面时，背景也会随之滚动。
<!DOCTYPE html>
<html>
<head>
<title>
background-attachment property
</title>
<style>
#example {
background-image: url("lion.png");
font-size: 35px;
border: 4px solid red;
color: white;
background-position: center;
background-color: green;
background-repeat: no-repeat;
background-attachment: scroll;
}
</style>
</head>
<body>
<h1> background-attachment: scroll;</h1>
<p> 如果屏幕上没有滚动条，请尝试调整浏览器窗口的大小以查看效果。 </p>
<div id="example">
<p>
欢迎来到bianchenghao6.com平台。立地货的目的是使大家可以轻松学习各种知识，提供各种简单且深入的教程。在这个世界上没有人是完美的，没有什么是永恒的，但是我们可以尝试变得更好。
</p>
</div>
</body>
</html>
输出
示例-使用固定值
在此示例中，我们使用
background-attachment 属性的
fixed 值。此值固定了背景图像，即使其余文档滚动，该图像也不会移动。
background-attachment 属性的
fixed 值。此值固定了背景图像，即使其余文档滚动，该图像也不会移动。
<!DOCTYPE html>
<html>
<head>
<title>
background-attachment property
</title>
<style>
#example {
background-image: url("lion.png");
font-size: 35px;
border: 4px solid red;
color: white;
background-position: center;
background-color: green;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1> background-attachment: fixed;</h1>
<p> 如果屏幕上没有滚动条，请尝试调整浏览器窗口的大小以查看效果。</p>
<div id="example">
<p>
欢迎来到bianchenghao6.com平台，立地货的目的是使大家可以轻松学习各种知识，提供各种简单且深入的教程。在这个世界上没有人是完美的，没有什么是永恒的，但是我们可以尝试变得更好。
</p>
</div>
</body>
</html>
输出
示例-使用局部值
在此示例中，我们使用
background-attachment 属性的
local 值。在这里，背景图像将随着元素内容的滚动而滚动。
background-attachment 属性的
local 值。在这里，背景图像将随着元素内容的滚动而滚动。
<!DOCTYPE html>
<html>
<head>
<title>
background-attachment property
</title>
<style>
#example {
background-image: url("lion.png");
font-size: 35px;
border: 4px solid red;
color: white;
background-position: center;
background-color: green;
background-repeat: no-repeat;
background-attachment: local;
}
</style>
</head>
<body>
<h1> background-attachment: local;</h1>
<p>如果屏幕上没有滚动条，请尝试调整浏览器窗口的大小以查看效果。</p>
<div id="example">
<p>
欢迎来到bianchenghao6.com平台，立地货的目的是使大家可以轻松学习各种知识，提供各种简单且深入的教程。在这个世界上没有人是完美的，没有什么是永恒的，但是我们可以尝试变得更好。
</p>
</div>
</body>
</html>
输出
现在，让我们来看另一个示例，其中一个元素使用了多个背景图像。
示例
在这里，有两个背景图像我们正在应用
background-attachment 属性。第一张图片的附件设置为
固定，而第二张图片的附件设置为
滚动。
background-attachment 属性。第一张图片的附件设置为
固定，而第二张图片的附件设置为
滚动。
<!DOCTYPE html>
<html>
<head>
<title>
background-attachment property
</title>
<style>
#example {
background-image:url("https://bianchenghao6.com/images/logo.png");
height: 500px;
border: 4px solid red;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed, scroll;
}
</style>
</head>
<body>
<h1> background-attachment: scroll;</h1>
<p>如果屏幕上没有滚动条，请尝试调整浏览器窗口的大小以查看效果。</p>
<div id="example">
</div>
</body>
</html>
输出
