Question

让我说我创建了一个像这样的标头ID的div <div id="header"></div>和我写的CSS

#header{
  width:100%;
  height:100px;
  background-color:#00ff00;
  margin:0;
  padding:0;}

这会创建一个全宽标题但是当我调整浏览器的宽度并使用滚动条时我向右滚动我发现背景没有达到浏览器的整个宽度它与我同样的事情当我使用背景图像有没有人知道这个解决方案

Answer 1

<强> CSS

#header {
    width:100%;
    height:100px;
    background: url(http://oi49.tinypic.com/9kpge0.jpg);
    background-size:100% 100%;
    background-repeat: no-repeat;
}

DEMO

Answer 2

首先，如果你真的将它作为标题使用，你应该使用 <header>标记用于保留HTML语义，而不是通常的<div>方法。

其次，由于<html>和<body>

上的默认格式，您可能会看到100％宽度问题

如果你想要一个全宽标题，你需要做这样的事情：

html,body{ /* basic html, body reset */
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0 auto;
}
#header{
    width: 100%;
    height: 250px; /* easier to visualize with a larger header size */
    background: url('someimage.url');
    background-size: cover;
    background-position: center;
}

background-cover css属性对于维护宽高比非常有用，尤其是对于响应式站点。

即使我调整浏览器窗口大小，如何创建仍保持完整宽度的完整宽度标题？

2 个答案: