gpt4 book ai didi

blueprint-css - Blueprint 是否会阻止 CSS 中图像的 100% 背景大小?

转载 作者:行者123 更新时间:2023-11-28 11:49:37 24 4
gpt4 key购买 nike

我正在尝试创建一个具有 background-size:100% 100% css 规则的网站。它是位于内容后面的图像,其设计方式无论浏览器窗口的尺寸如何,它仍然可以正常工作。

我认为我的规则(如下所示)与蓝图有某种冲突。

body { 
background:url('../img/bg.jpg') no-repeat;
background-size:100% 100%;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
}

这应该会生成一个完美的 100% 背景图像,但是,我得到的结果是背景在内容结束的地方结束,无论浏览器窗口大小如何。

这是我想要的和我得到的两张图片:

预期 expected background display

我得到了什么(无论浏览器大小) display I'm getting

请帮助我,我不确定如何进行。

这是我的页面 HTML 设置:

<body>
<div class="container">
<div id="navbar" class="span-6 last">
<div id="logo" class="span-6 last"></div>
<div id="menu">
<ul>
<li class="menu-current"><a href="index.php">Home</a></li>
<li><a href="aboutus.php">About Us</a></li>
<li><a href="services.php">Services</a></li>
<li><a href="contact.php">Contact Us</a></li>
</ul>
</div>
</div>
<div id="content" class="span-18 last">

</div>
</div>
</body>

如果容器高 550 像素,则背景在页面下方 550 像素处结束,该区域下方有一个空白区域。

我能够在 JSFiddle 上复制效果:

http://jsfiddle.net/danhanly/TurW5/4/

最佳答案

如果您能以这种方式向我们展示您的 HTML 和 CSS,那就太好了,也许我可以指出您做错了什么。

你可以写。

html {height:100%}
body {background:url('/image.jpg') no-repeat center}
#container {
margin:20px auto;
width:960px;
overflow:hidden}

关于blueprint-css - Blueprint 是否会阻止 CSS 中图像的 100% 背景大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6048230/

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