Question

我想让背景图片填充包含它的div。我会附上图片来说明发生了什么。

这个空地的原因是什么？它阻止我将我的容器移到一起。

以下是codepen链接：http://codepen.io/ManBearPigg/full/qZVJWy/

#firstContainer {
  background-image: url("/focusbackground.png");
  background-size: cover;
  width: 720px;
  height: 700px;
  float: left;
  margin-left: -7%;
}

#secondContainer {
  background-image: url("/focusbackground.png");
  background-size: cover;
  width: 720px;
  height: 700px;
  float:right;
  margin-right: 5%;
}

这是html

<div id="container">
  <div id="firstContainer">
    <form id="firstForm" action="">
      <textarea id="firstArea" type="text" onkeypress="return myKeyPress(event)"></textarea>
      <input type="submit" id="firstSubmit"></input>
      <div id="lineNo"></div>
    </form>
  </div>
  <div id="secondContainer">
    <form id="secondForm" action="">
      <textarea id="secondArea" type="text" onkeypress="return mySecondKeyPress(event)"></textarea>
      <input type="submit" id="secondSubmit"></input>
    </form>
  </div>
</div>

Answer 1

也许这只是一个评论而不是一个答案，但我不能在你的帖子上添加评论，所以我道歉，以防我不明白你的问题。

我能看到的是image本身有白色边框。您可能需要剪切图像以删除没有图片的部分。通过这样做，它将涵盖div

Answer 2

@will是对的。您正在使用的图像是一个实际的图像文件，因此将具有某些难以或不值得通过HTML，CSS，JavaScript等操作的属性。某些文件（如图像，音频和视频）需要编辑或转换之前它已上传。例如，该图像需要裁剪透明区域。我做了以下事情：

下载PNG图像文件。
使用Paint.NET程序裁剪文件的透明区域。
将文件上传到imgur。

用imgur中的新网址替换了网址：http://s9.postimg.org/4laackvcf/focusbackground.png：http://i.imgur.com/7s1A3zf.png

body {
    background:#628fd5;
}

#firstContainer {
    background-image: url("http://i.imgur.com/7s1A3zf.png");
    background-size: cover;
    width: 720px;
    height: 700px;
    float: left;
    margin-left: -7%;
 }

 #secondContainer {
    background-image: url("http://i.imgur.com/7s1A3zf.png");
    background-size: cover;
    width: 720px;
    height: 700px;
    float:right;
    margin-right: 5%;
 }

结果是CodePen。

顺便说一句，我用body { background:#628fd5; }替换了蓝色图像。使用CSS总是比使用文件更好。对于页面上的每个图像都是一个HTTP请求往返，这会增加延迟（减慢您的网页/网站速度）。

background-size：封面无法用背景图像完全填充div

2 个答案: