HTML 设置body背景图高度根据div自适应
时间: 2023-09-03 18:09:52 浏览: 103
要让 body 背景图的高度根据 div 自适应,可以使用 CSS 中的 background-size 属性。
首先,将 body 的背景图设置为固定位置:
```css
body {
background-image: url('your-image-url');
background-repeat: no-repeat;
background-attachment: fixed;
}
```
然后,设置 background-size 属性为 cover,这样背景图就会根据 body 元素的大小自动缩放,并保持纵横比:
```css
body {
background-image: url('your-image-url');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
```
最后,需要将 div 的高度设置为 100%(或者是其他你想要的高度),这样 div 的大小就会随着 body 的大小而变化:
```css
div {
height: 100%;
}
```
完整的 CSS 代码如下:
```css
body {
background-image: url('your-image-url');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
div {
height: 100%;
}
```
阅读全文