Question

这是我的背景css，但问题是背景中的所有边缘仍有4px的间隙。怎么了？

#header-color {
    background:transparent;
    background: #cccccc; /* old browsers */
background: -moz-linear-gradient(top, #cccccc 24%, #eeeeee 100%); /* firefox */

background: -webkit-gradient(linear, left top, left bottom, color-stop(24%,#cccccc), color-stop(100%,#eeeeee)); /* webkit */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#eeeeee',GradientType=0 ); /* ie */
    background-repeat:repeat;
    background-position:top;
}

Answer 1

您需要在margin上删除用户代理样式表的默认body：

html, body {
    margin: 0;
    padding: 0
}

Answer 2

浏览器曾经拥有自己的样式定义。如果您在css中包含某种重置，则会覆盖您的背景。一些选择：

示例重置css：

/* ----------------------------
simple reset
---------------------------- */

html, body, ul, ol, li, form, fieldset, legend
{
    margin: 0; padding: 0;
}
h1, h2, h3, h4, h5, h6, p { margin-top: 0; }
fieldset,img { border: 0; }

legend { color: #000; }
li { list-style: none; }
sup { vertical-align: text-top; }
sub { vertical-align: text-bottom; }
table
{
    border-collapse: collapse; border-spacing: 0;
}
caption, th, td
{
    text-align: left; vertical-align: top; font-weight: normal;
}
input, textarea, select
{
    font-size: 110%; line-height: 1.1;
}
abbr, acronym
{
    border-bottom: .1em dotted; cursor: help;
}

Answer 3

header-color是什么类型的元素？您可能需要添加：

padding: 0;
margin: 0;

如果您的标题位于页面顶部，则可能需要删除正文的边距和填充，如下所示：

html, body {
    margin: 0;
    padding: 0;
}

Answer 4

您提供给我们的代码不足以准确诊断问题。您提供的CSS代码中没有任何内在的东西会导致4px的差距，并且您没有告诉我们关于元素的上下文的任何信息，所以我们无法看到它周围的其他因素可能导致这个差距。

然而，我的猜测是4px间隙可能是页面边缘周围的默认填充/边距。

这有点像旧时代，但它仍然存在，所以如果你想让你的页面内容直接流到窗口的边缘，你需要清除这些边缘，如下所示： / p>

html, body {
    padding: 0;
    margin: 0;
}

默认样式中还有许多其他小怪癖会让你感到困惑（特别是因为有些人有跨浏览器的差异），所以最好有一个'重置'样式表。有许多可用，但您可能想尝试这个：http://meyerweb.com/eric/tools/css/reset/

将此样式表添加到您的站点将确保处理所有这些小布局怪癖。

希望有所帮助。

为什么没有完全覆盖背景

4 个答案: