gpt4 book ai didi

html - 即使缩放也能填满浏览器窗口的 DIV

转载 作者:太空宇宙 更新时间:2023-11-04 13:24:09 24 4
gpt4 key购买 nike

我希望我的背景 DIV 始终填满整个浏览器窗口。我在背景之上有一个 DIV,它正在按照我想要的方式移动,我的位置是按百分比设置的。当我缩小时,两个 DIV 一起移动,产生背景颜色的曝光。这是我的网站:

http://search.officesupplycentral.org/details.html

这是我希望我的 DIV 如何运行的示例:

http://fab.com/

如有任何帮助,我们将不胜感激!

吉姆

最佳答案

fab.com使用一种特殊的方法,如果您只检查站点的代码就很容易看到。

它将背景设置为 HTML 标记 <html style="background-image: url(//s3.amazonaws.com/static.fab.com/relaunch/fab-daily-design-for-everyone-8.jpg);">并在 CSS 文件中为其设置以下值:

html{
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

然后它将背景设置为 <body>在 CSS 中透明化:

body{
background: transparent;
}

我没有进一步研究的有根据的猜测是,由于图像被设置为 <html> 上的背景。当页面放大或缩小时,标记和背景大小设置为覆盖它不会被处理。

关于html - 即使缩放也能填满浏览器窗口的 DIV,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11602410/

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