Question

我有一个重复的标题图片，显示在页面顶部。问题是它在左右两侧留下了一些空白。如何使图像以页面的整个宽度显示？这就是我所做的。

      <!DOCTYPE html>

      <style>
      .bgimg{
      min-height: 44px;
      background: url("img/top-bar.png") repeat top left;
      }
      </style>

      <html>
      <head lang="en">
      <meta charset="UTF-8">
      <title></title>
      </head>

       <body>
        <header>
          <div class="bgimg">
         </div>
        </header>
       </body>
      </html>

Answer 1

我认为你看到了身体标签的边缘，删除了boby标签的边缘。

<!DOCTYPE html>

  <style>
  .bgimg{
  min-height: 70px;
  background: url("http://icons.iconarchive.com/icons/mazenl77/I-like-buttons-3a/128/Cute-Ball-Go-icon.png") ;
  }
  </style>

  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title></title>
  </head>

   <body style="margin:0px">
    <header>
      <div class="bgimg">
     </div>
    </header>
   </body>
  </html>

Answer 2

默认情况下，每个浏览器都对所有元素都有自己的css规则，以使非样式网站更清晰，这就是即使您没有设置该规则也能看到边距的原因。

通常使用重置css，因此您不必处理此问题。

这是一篇文章 explains the use of a reset css

这是我使用的common reset css from html5 doctor。

重复标题图像CSS

2 个答案: