Question

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

这是我的代码：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

删除align="left"属性。它的行为就像你制作了图像float: left一样，但是你从来没有清除浮动，因此父母崩溃了，你根本看不到背景：

＆＃13;

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

＆＃13;

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

＆＃13;

如果您想使徽标左对齐，则应使用text-align: left的{{1}}，它将正常工作，因为默认情况下img是内嵌块。

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

背景色环绕图像

2 个答案: