gpt4 book ai didi

css - 调整窗口大小时居中背景图像的最小边距

转载 作者:行者123 更新时间:2023-11-28 18:40:52 26 4
gpt4 key购买 nike

我有一个使用 CSS 垂直和水平居中的背景图片。它看起来很棒,只要窗口足够大以显示背景图像,它就可以正常工作。

当窗口被调整为小于 bg 图像时,我遇到了这个问题。发生这种情况时,bg 图像继续居中,但我需要在 bg 图像的顶部和左侧保持最小边距。 BG 图像是 900px x 700px,我使用的代码是:

#main_wrapper {
background-image: url(../images/background.jpg);
position:relative;
width:900px;
height:700px;
left:50%;
top:50%;
margin-left:-450px;
margin-top:-350px;
}

当窗口足够大时,任何解决方案都需要继续将背景图像水平和垂直居中,但当窗口比背景图像短时,顶部会有最小边距,并且最小边距当窗口比 bg 图像窄时在左侧。任何帮助将不胜感激。谢谢。

最佳答案

如果这在您的 <body> 中,我会在正文的开头添加两个额外的 div,绝对定位,背景颜色为白色,以确保在该区域看不到背景图像。

然后将 body 中的其余部分包裹在 <div> 中让它成为position: relative .

我认为这应该会产生您想要的结果。

关于css - 调整窗口大小时居中背景图像的最小边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11460477/

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