logo标签列表

背景色环绕图像

htmlcssbackground-color
6
我希望将我的页面徽标放在左上角，并用黑色背景包围。 但是，背景颜色不覆盖图像右侧的区域。 我正在使用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>

2个回答
0

移除 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 是内联块。
0
你需要为标题元素添加一个显示规则，以便它在流程中实际获得位置： 

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接