背景色环绕图像答案

【问题标题】：background color surround image背景色环绕图像
【发布时间】：2015-09-30 00:38:36
【问题描述】：

我希望我的页面的徽标位于左上角并被黑色背景包围。但是，背景颜色不会覆盖图像右侧的区域。我正在使用 HTML 和 CSS。

这是我的代码：

#title {
  width: 100%;
  height: 100%;
  background-color: black;
}
#title img {
  width: 50%;
  height: 50%;
}

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="index.css" media="screen" />

<body>
  <div id="title">
    <a href="index.html">
      <img src="http://i.stack.imgur.com/WE2r4.png" align="left" />
    </a>
  </div>
</body>

</html>

【问题讨论】：

标签： html css background-color

【解决方案1】：

您必须向您的标题元素添加一个显示规则，以便它实际上在流程中获得一个位置：

#title {
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: black;
}
#title img {
  width: 50%;
  height: 50%;
}

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="index.css" media="screen" />

<body>
  <div id="title">
    <a href="index.html">
      <img src="http://i.stack.imgur.com/WE2r4.png" align="left" />
    </a>
  </div>
</body>

</html>

【讨论】：

【解决方案2】：

删除align="left" 属性。它的作用类似于您创建图像float: left，但是您永远不会清除浮动，因此父级崩溃并且您根本看不到背景：

#title {
  width: 100%;
  height: 100%;
  background-color: black;
}
#title img {
  width: 50%;
  height: 50%;
}

<!DOCTYPE html>
<html>
<link rel="stylesheet" type="text/css" href="index.css" media="screen" />

<body>
  <div id="title">
    <a href="index.html">
      <img src="http://i.stack.imgur.com/WE2r4.png" />
    </a>
  </div>
</body>

</html>

如果你想让标志左对齐你应该使用#title中的text-align: left，它会正常工作，因为img默认是inline-block。

【讨论】：