Question

我正在尝试在跨度内的文本旁边添加箭头图像。这是我正在使用的HTML：

<span id="status" class='unreviewed'>
  Unreviewed 
  <img src="bullet_arrow_down.png" />
</span>

现在，我用这个css着色了跨度的背景：

#status {
  float: right;
  position: relative;
  cursor: pointer;
  -moz-background-clip:border;
  -moz-background-inline-policy:continuous;
  -moz-background-origin:padding;
  color:#FFFFFF;
  font-size: 1.8em;
  top: 10px;
}

#status span.unreviewed {
  padding: 3px 4px; 
  background:#DA704B none repeat scroll 0 0;
}

#status span.unreviewed img {
  float: right;
}

现在，这会显示正确排列的所有内容，但背景颜色不会超出“未审核”一词的结尾。尽管图像是透明的png，但它仍然是白色，而不是＃DA704B。

Firefox和Safari都是这种情况。任何帮助将不胜感激！

Answer 1

Spans需要显示：block;为了像那样工作。

#status {
  display: block;
  float: right;
  position: relative;
  cursor: pointer;
  -moz-background-clip:border;
  -moz-background-inline-policy:continuous;
  -moz-background-origin:padding;
  color:#FFFFFF;
  font-size: 1.8em;
  top: 10px;
}

Answer 2

嗯，突然发现的是：

#status span.unreviewed

将是带有“未审阅”类的span的选择器，它是#status的后代。您正在寻找的选择器是

#status.unreviewed

您可能希望查看CSS2的w3c规范，以避免像这样的选择器问题。 http://www.w3.org/TR/CSS2/selector.html

希望有所帮助。

编辑：另一个快点，为什么不使用background-color代替background，因为您所做的只是改变背景颜色？

Answer 3

改变：

#status span.unreviewed {

要 span.unreviewed {

适用于所有浏览器。

如果它仍然不起作用，请尝试将其设置为块级别或使用div，因为着色并不像您期望的那样在内联元素上运行

Answer 4

您可能还会发现值得宣布：

#status span.unreviewed img {
background-color: transparent;
}

至少应该删除白色默认图像背景。

HTML：带有背景颜色和图像的跨度 - 为什么颜色不会出现在图像下面？

4 个答案: