文章/答案/技术大牛

发布

社区首页 >问答首页 >蓝图是否防止在CSS中的图像有100%的背景大小？

问蓝图是否防止在CSS中的图像有100%的背景大小？
EN

Stack Overflow用户

提问于 2011-05-18 16:51:42

回答 2查看 809关注 0票数 2

我正在尝试创建一个带有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%的背景图像，然而，我得到的结果是，无论浏览器窗口大小如何，背景都会在内容完成的地方完成。

这里有两张我想要的和我正在得到的图片：

期望

我得到了什么(不管浏览器大小)

请帮帮我，我不知道该怎么做。

下面是页面的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 an高，那么背景结束550 an向下的页面，在该区域下方有一个空的空白。

我能够在JSFiddle上复制这种效果：

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

blueprint-css

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2011-05-18 20:59:03

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

你可以写。

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

票数 2

Stack Overflow用户

发布于 2011-05-18 17:21:16

在身体上添加一个与背景图像高度相等的最小高度将确保身体足够大以显示整个背景。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/6048230

复制

相似问题

问蓝图是否防止在CSS中的图像有100%的背景大小？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问蓝图是否防止在CSS中的图像有100%的背景大小？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问蓝图是否防止在CSS中的图像有100%的背景大小？
EN