css 两张图做背景图一个在上面一个在下面,背景图上面内容可以滚动
时间: 2024-03-17 10:47:41 浏览: 32
可以通过使用CSS中的`background-image`属性和`background-position`属性来设置两张背景图片的位置,并且使用`overflow`属性来控制上面内容的滚动。具体实现可以参考以下代码:
HTML结构:
```html
<div class="background">
<div class="content">
// 上面的内容在这里
</div>
</div>
<div class="background bottom">
<div class="content">
// 下面的内容在这里
</div>
</div>
```
CSS样式:
```css
.background {
position: relative;
background-repeat: no-repeat;
background-size: cover;
}
.bottom {
background-position: bottom;
}
.content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: auto;
padding: 20px;
}
```
上面的代码中,`.background` 类设置了背景图片的样式,`.bottom` 类设置了下面背景图片的位置。`.content` 类设置了上面内容的样式,并且使用`overflow`属性来控制滚动。
你可以将上面的内容替换为你需要的内容,然后将背景图片的URL替换为你想要的图片URL,就可以实现两张背景图一个在上面一个在下面,背景图上面内容可以滚动的效果。