css固定背景图片
时间: 2023-07-23 08:12:55 浏览: 45
要在 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实现网页背景图片自适应全屏的方法有多种,以下是其中一种方法:
```css
body {
/* 加载背景图 */
background-image: url(images/background-photo.jpg);
/* 背景图垂直、水平居中 */
background-position: center center;
/* 背景图不平铺 */
background-repeat: no-repeat;
/* 当内容高度大于图片高度时,背景图像的位置相对于viewport固定 */
background-attachment: fixed;
/* 让背景图基于容器大小伸缩 */
background-size: cover;
/* 设置背景颜色,背景图加载过程中会显示背景色 */
background-color: #464646;
}
```
这段CSS代码将背景图片设置为全屏自适应,并且在图片加载过程中显示背景色。其中,`background-image`属性用于加载背景图,`background-position`属性用于设置背景图的位置居中,`background-repeat`属性设置背景图不平铺,`background-attachment`属性设置背景图相对于viewport固定,`background-size`属性用于让背景图基于容器大小伸缩,`background-color`属性设置背景色。
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` 值后,背景图片将被缩放以适应容器大小,并保持完整的内容显示。
通过以上几种方式,你可以根据需要来设置背景图片的尺寸大小。