background-attachment 的scroll和local的区别与使用
时间: 2024-05-23 19:09:35 浏览: 13
background-attachment 属性决定背景图片相对于元素框固定还是随着内容滚动。scroll 值是默认值,表示背景图片随着内容滚动。local 值表示背景图片固定在元素框内,不会随着内容滚动。当滚动元素时,背景图片会被裁剪到元素框的边缘。
通常情况下,我们使用 background-attachment: scroll 把背景图片随着内容一起滚动,这可以让内容看起来更加自然。而当我们想要在某个固定位置展示背景图片(比如某个固定元素的背景或者全屏的背景),这时就要使用 background-attachment: local 来将背景图片固定在元素内,这样不仅有利于美观,也有助于减少经常重复加载同一张图片的带宽开销。
相关问题
css属性中background-attachment怎么使用
background-attachment属性用于设置背景图片的滚动方式。它有以下几个取值:
1. scroll:背景图片会随着页面的滚动而滚动;
2. fixed:背景图片会固定在页面上,不会随着页面的滚动而滚动;
3. local:背景图片会随着所在的区块一起滚动;
4. initial:使用默认值;
5. inherit:继承父元素的值。
可以这样使用:
background-attachment: scroll; /* 背景图片随页面滚动 */
background-attachment: fixed; /* 背景图片固定不动 */
background-attachment: local; /* 背景图片随所在区块滚动 */
background-attachment: initial; /* 使用默认值 */
background-attachment: inherit; /* 继承父元素的值 */
background-attachment
`background-attachment`是CSS中用来设置背景图像是否固定或者随着页面的滚动而移动的属性。它有三个可能的值:
- `scroll`(默认值):背景图像随着页面滚动而移动。
- `fixed`:背景图像固定在浏览器窗口的某个位置,不随着页面的滚动而移动。
- `local`:背景图像随着元素的滚动而移动。
例如
```css
body {
background-image: url('bg.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)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)