Question

我一直在尝试在网站中制作全宽背景图片来定义其高度，但图片在屏幕的左侧和右侧都有5px空白。在为正文部分中的背景定义CSS时，它是完美的，但在div部分中定义时，屏幕左侧和右侧的5px空白是不可取的。

CSS：

body {
    background: url(images/bg.jpg) #FFFFFF repeat-x;
    font: normal 12px verdana;
    color: #9C9C9C;
    line-height: 125%;
}
#top_banner {
    width: 1000px;
    margin: auto;
    height: 120px;
}
#menu_bg {
    width: 1000px;
    margin: auto;
    background: url(images/menu_bg.jpg) no-repeat;
    height: 86px;
    margin-top: 7px;
}
#menu {
    width: 805px;
    float: right;
    margin-top: 40px;
}
#slider_bg {
    background: #CCCCCC;
    height: 362px;
    width: 100%;
}
#slider {
    background: grey;
    height: 362px;
    width: 1000px;
    margin: auto;
}
#bigmenu_bg {
    background: #333745;
    height: 427px;
    margin-top: 4px;
}

HTML：

<body>
    <div id="top_banner"></div>
    <div id="menu_bg">
        <div id="menu"></div>
    </div>
    <div id="slider_bg">
        <div id="slider"></div>
    </div>
    <div id="bigmenu_bg"></div>
</body>

Answer 1

使用像这样的身体

body {
background: url(images/bg.jpg) #FFFFFF cover;
font: normal 12px verdana;
color: #9C9C9C;
line-height: 125%;
margin: 0;
background-size: cover;
}

Answer 2

从正文标记中删除默认边距。

body {
  margin:0;
}

Answer 3

将margin:0;添加到正文标记（以删除默认设置）并将#menu_bg的上边距增加到15px;（以更正菜单的位置）

body {
    background: url("images/bg.jpg") repeat-x scroll 0 0 #FFFFFF;
    color: #9C9C9C;
    font: 12px/125% verdana;
    margin: 0;
}

#menu_bg {
    background: url("images/menu_bg.jpg") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    height: 86px;
    margin: 15px auto auto;
    width: 1000px;
}

Answer 4

正在发生的事情是，不同的浏览器正在应用他们自己的“默认”样式，其中可能包含不同的填充和边距值 - 因此您正在经历少量的左边距或填充。

这就是为什么许多网站使用CSS重置或normalize.css来提供公平的竞争环境并强制浏览器应用自定义CSS可以构建的基本样式。

Answer 5

CSS reset是一个很好的答案。更多信息：What is a CSS Reset?

以下情况有效，但不推荐出于性能原因以及出现意外结果：

* { margin: 0; padding: 0: }

Read more here关于星号选择器的问题:)

从那个答案：

谈到表演，Steve Souders就是男人：


Performance Impact of CSS Selectors

Simplifying CSS Selectors


其中一份报告的无耻报价：

优化CSS选择器的关键是关注最右边的选择器，也称为键选择器（巧合？）。这是一个更昂贵的选择器：A.class0007 * {}。虽然这个选择器可能看起来更简单，但浏览器匹配起来更昂贵。因为浏览器从右向左移动，所以它首先检查与键选择器匹配的所有元素“*”。这意味着浏览器必须尝试将此选择器与页面中的所有元素进行匹配。

[大胆强调我的]

以下代码段是您示例的良好开端。它会删除所有浏览器默认值，以便您可以在顶部构建一致的CSS。它看起来很荒谬，您可以删除不会使用的元素，但它会提供一致的行为和更快的性能。

Have a fiddle!

CSS

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, menu, nav, section, time, mark, audio, video, details, summary {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    font-family: Helvetica;
}

Answer 6

将此添加到您的css

* {
margin: 0;
padding: 0;

}

如何在网站上制作全宽背景而不是全屏？

6 个答案: