css 背景固定
时间: 2023-07-02 08:20:52 浏览: 49
如果想要让背景图像在页面滚动时保持固定不动,可以使用CSS中的`background-attachment`属性,并将其设置为`fixed`。
例如:
```
body {
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
```
在上述代码中,`background-attachment`被设置为`fixed`,这将确保背景图像在滚动时保持固定不动。这对于创建具有视觉吸引力的固定背景图像非常有用。
相关问题
css固定背景图片
要在 CSS 中固定背景图片,可以使用 `background-attachment` 属性,将其设置为 `fixed`。如下所示:
```css
body {
background-image: url('your-image-url.jpg');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
```
这将会将背景图片固定在浏览器窗口,无论用户如何滚动页面,背景图片都会保持在同一位置。
css 背景图片尺寸
CSS背景图片的尺寸可以有多种方式来指定。以下是一些常见的方法:
1. 固定尺寸:可以使用具体的像素值来指定背景图片的宽度和高度。例如:
```css
.example {
background-image: url("example.jpg");
background-size: 200px 300px;
}
```
这样设置后,背景图片的宽度将为200像素,高度将为300像素。
2. 百分比尺寸:可以使用百分比值来指定背景图片相对于容器元素的尺寸。例如:
```css
.example {
background-image: url("example.jpg");
background-size: 50% 75%;
}
```
这样设置后,背景图片的宽度将为容器宽度的50%,高度将为容器高度的75%。
3. 自适应尺寸:可以使用 `cover` 或 `contain` 值来让背景图片自适应容器大小。例如:
```css
.example {
background-image: url("example.jpg");
background-size: cover;
}
```
使用 `cover` 值后,背景图片将被缩放并裁剪以填满容器,可能会导致部分内容被裁剪。而使用 `contain` 值后,背景图片将被缩放以适应容器大小,并保持完整的内容显示。
通过以上几种方式,你可以根据需要来设置背景图片的尺寸大小。
相关推荐
![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_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)