Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/38.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Html 重复标题图像CSS_Html_Css - Fatal编程技术网

Html 重复标题图像CSS

Html 重复标题图像CSS,html,css,Html,Css,我有一个重复的标题图像出现在页面顶部。问题是它在左右两边都留下了一些空白。如何使图像显示在页面的全宽范围内?这就是我所做的 <!DOCTYPE html> <style> .bgimg{ min-height: 44px; background: url("img/top-bar.png") repeat top left; } </style> <htm

我有一个重复的标题图像出现在页面顶部。问题是它在左右两边都留下了一些空白。如何使图像显示在页面的全宽范围内?这就是我所做的

      <!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>

.bgimg{
最小高度:44px;
背景:url(“img/top bar.png”)重复左上角;
}

我想你看到了你的body标签的边缘,去掉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>

.bgimg{
最小高度:70px;
背景:url(“http://icons.iconarchive.com/icons/mazenl77/I-like-buttons-3a/128/Cute-Ball-Go-icon.png") ;
}

默认情况下,每个浏览器在所有元素上都有自己的css规则,以使非样式网站更清晰,这就是为什么即使未设置该规则,您仍会看到空白

通常使用重置css,这样您就不必处理这些问题

这里有一篇文章


以下是我使用的一个示例。

请提供一个在线示例来演示实际问题。我无法使用当前给定的代码重现该问题。您可能需要重置css表。默认情况下,浏览器对某些元素具有padding和margin(以及其他)值。无论如何,试试body{margin:0;padding:0;}每个浏览器都有一些预定义的元素样式,body通常有margin,所以试试
body{margin:0;}
屏幕截图也会很有用。您应该将
style
标记放在
head
标记中——这不是100%必需的,但这就是它所属的位置。谢谢你的回答。太好了!它起作用了。正如斯科巴利奇所说,凌驾于身体边缘才是关键。谢谢