gpt4 book ai didi

html - 如何使背景位置在响应式网站中不发生变化

转载 作者:太空宇宙 更新时间:2023-11-03 18:03:31 25 4
gpt4 key购买 nike

我遇到的问题是,当窗口的大小发生变化时,背景的位置也会发生变化,并且我希望它保持在相同的位置,我在页面主体上有这个背景。

像这样:

<body id="bg">

<p>some text here</p>

</body>

CSS:

#bg{
background-image:url(../../images/img1.jpg);
background-repeat: no-repeat;
background-size: 100% auto;
background-position: 25% 25%;
}

这是在默认屏幕尺寸下的样子:

http://i60.tinypic.com/2n03dsg.jpg

这是屏幕尺寸变化的时候:

http://i62.tinypic.com/11tlpwz.jpg

我想知道的是:我需要为此使用媒体查询还是有更简单的方法来做到这一点?

最佳答案

如果你想让它适合屏幕,你最好使用background-size: cover;

试试这个方法:

#bg {
background: url(../../images/img1.jpg) no-repeat 25% 25% fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

让我知道它是否能解决问题;-)

关于html - 如何使背景位置在响应式网站中不发生变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25072125/

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