background-attachment属性
时间: 2023-04-19 12:03:50 浏览: 67
background-attachment属性是CSS中用来设置背景图像的滚动方式的属性。它指定了背景图像是否会随着页面的滚动而滚动,或者固定在一个位置不动。
可以设置的值包括:
- scroll:背景图像会随着页面滚动而滚动;
- fixed:背景图像会固定在页面上不动;
- local:背景图像会随着元素内容的滚动而滚动,而不是随着整个页面的滚动而滚动。
该属性通常用于网页设计中,可以帮助设计师创建出各种独特的页面效果。例如,可以将一个固定的背景图像设置在页面底部,当用户滚动页面时,页面的内容会遮挡背景图像,形成一种有趣的视觉效果。
相关问题
css的background-attachment的属性及演示
background-attachment属性指定背景图像是否固定或随着页面滚动而移动。它有以下几个值:
1. scroll(默认值):背景图像随着页面滚动而移动。
2. fixed:背景图像固定不动,不随着页面滚动而移动。
3. local:背景图像相对于元素内容固定,不随着页面滚动而移动。
以下是演示:
```html
<!DOCTYPE html>
<html>
<head>
<title>Background Attachment Demo</title>
<style type="text/css">
body {
height: 2000px;
}
.bg-scroll {
background-image: url('https://picsum.photos/1200/800');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: scroll;
}
.bg-fixed {
background-image: url('https://picsum.photos/1200/800');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.bg-local {
background-image: url('https://picsum.photos/1200/800');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-attachment: local;
height: 500px;
overflow: scroll;
}
.content {
padding: 50px;
color: #fff;
text-align: center;
font-size: 2em;
}
</style>
</head>
<body>
<div class="bg-scroll">
<div class="content">
Scroll Background
</div>
</div>
<div class="bg-fixed">
<div class="content">
Fixed Background
</div>
</div>
<div class="bg-local">
<div class="content">
Local Background
</div>
</div>
</body>
</html>
```
以上代码将创建三个不同的元素,每个元素都有不同的background-attachment属性。第一个元素的背景图像随着页面滚动而移动,第二个元素的背景图像固定不动,第三个元素的背景图像相对于元素内容固定,只有元素内容区域内可以滚动。
css background-attachment
CSS的background-attachment属性指定了背景图像的滚动方式。它有以下几个取值:
- scroll:背景图片会随着页面的滚动而滚动。
- fixed:背景图片在视口中固定,不会随着页面滚动而滚动。
- local:背景图片会随着元素内容的滚动而滚动。该值仅适用于当背景图像在一个元素的内部时才有意义。
- initial:将属性设置为它的默认值。
- inherit:从父元素继承background-attachment属性的值。
示例代码:
```
body {
background-image: url(background-image.jpg);
background-attachment: fixed;
}
```
上面的代码将背景图片固定在视口中,不会随着页面的滚动而滚动。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)