gpt4 book ai didi

css - 将多个背景对齐到页面底部?

转载 作者:太空宇宙 更新时间:2023-11-04 04:46:34 26 4
gpt4 key购买 nike

我正在创建一个由打印设计师设计的网站。背景由两张图片组成:

沿 y 轴重复并与页面底部对齐的渐变一张与页面底部对齐并居中的图像。(圆圈)

演示: enter image description here

圆圈部分很大,大部分页面内容都在上面。 (~900px x ~750px)。

如果页面太小,我需要添加卷轴。如果页面太大。我需要第一个图像(垂直)和背景颜色(水平)来为我填写区域。我想使用多个背景,但网站需要 IE8 支持。

最佳答案

为渐变剪下一个 1px 的 strip ,并在 body 上水平重复。将附件设置为固定。

剪下圆圈并将其作为内容容器的背景图片。这可能是一个具有透明度的 png,以允许显示之前的渐变。

CSS

body {
background: url('bg.jpg') center bottom repeat-x fixed;
}

.container {
background: url('circle.png') no-repeat center bottom;
margin: 0 auto;
min-height: 750px;
width: 900px;
}

HTML

<body>
<div class="container">
content here
</div>
</body>

关于css - 将多个背景对齐到页面底部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14385208/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com