Question

我想用图片（jpg）作为我页面的背景。

这就是我试图解决这个问题的方法：创建正文，在body体内放置一个带有id backgroundWallpaper的div。在div里面我放了图像。问题是，它完全填满了网站（水平），也到顶部，但在底部，图片和浏览器之间有一个小的间隙。我将身体背景改为深红色，以证明你的差距。我使用最新版本的safari作为我的浏览器。这是我的代码：的index.html

<!DOCTYPE html>
 <html>
  <head>
   <meta charset="utf-8">
   <title>name</title>
   <linkrel="stylesheet"
   href"http://meyerweb.com/eric/tools/css/reset/reset.css">
   <link rel="stylesheet" href="main.css">
  </head>
  <body>
   <div id="backgroundWallpaper">
    <img src=".../img/1.jpg" alt="image could not be loaded">
   </div>
  </body>
 </html>

这是我的css文件

body {
 background: crimson;
 margin: 0;
 padding: 0;
}

#backgroundWallpaper img {
 max-width: 100%;
}

Answer 1

使用下面的代码来生成图像块元素，图像是默认的内联元素，它有一些属性。这就是你获得额外空间的原因。

#backgroundWallpaper img{
  display:block
}

我希望它会对你有所帮助。

Answer 2

您正在使用max-width: 100%;，但如果您的图片小于DIV，则不会填充DIV。使用width: 100%。尽管如此，这并不能保证高度将填满窗户高度，因为它将保持其原始比例。

最好将图片用作body的背景图片并为其设置background-size: cover

Answer 3

当我将css文件直接添加到html文件时，我在firefox或chrome中看不到任何空格，但我确实得到了无法加载的图像。照片的大小。没有照片尺寸，可能很难解决。

＆＃13;

<!DOCTYPE html>
 <html>
  <head>
   <meta charset="utf-8">
   <title>name</title>
   <linkrel="stylesheet"
   href"http://meyerweb.com/eric/tools/css/reset/reset.css">
   <link rel="stylesheet" href="main.css">
  </head>
  <body>
   <div id="backgroundWallpaper">
    <img src=".../img/1.jpg" alt="image could not be loaded">
   </div>

<style>
body {
 background: crimson;
 margin: 0;
 padding: 0;
}

#backgroundWallpaper img {
 max-width: 100%;
}
</style>
  </body>
 </html>

＆＃13;

Answer 4

您可以使用背景来正确解释here

＆＃13;

body {
 background: crimson;
 margin: 0;
 padding: 0;
 background: url(http://placehold.it/350x150) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

＆＃13;

Answer 5

如果您在向下滚动页面时不想看图像

#backgroundWallpaper{
  background-image: url(...);
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0;
  width: 100%;   
  height: 100vh; /* viewport height */
}

div中的HTML图片不会完全填写正文

5 个答案: