HTML: span с фоновым цветом и изображением-почему цвет не отображается под изображением?

Я пытаюсь добавить изображение стрелки рядом с текстом в пределах диапазона. Вот 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;
}

теперь это отображает все правильно выстроенные, но цвет фона не распространяется за конец слова "Unreviewed". Изображение, несмотря на то, что прозрачный png, белый позади, а не #DA704B.

это касается как Firefox и Сафари. Любая помощь будет оценена!

6
css html image

4 ответов

промежутки должны иметь display: 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;
}
15

Ну, то, что выскакивает на меня:

#status span.unreviewed

будет селектором для span с классом "unreviewed", который является потомок статус#. Селектор вы ищете

#status.unreviewed

возможно, вы захотите взглянуть на спецификации w3c для CSS2, чтобы избежать таких проблем с селектором. http://www.w3.org/TR/CSS2/selector.html

надеюсь, что это поможет.

edit: еще один быстрый момент, почему бы не использовать background-color вместо background как все, что вы делаете, это изменение цвета фона?

2

изменения: 

#status span.unreviewed {

to промежуток.unreviewed {

это работает для меня во всех браузерах.

если он все еще не работает, попробуйте сделать его на уровне блока или использовать div, так как окраска не совсем работает, как вы ожидали бы на встроенных элементах

0

вы также можете найти, что стоит объявить:

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

это должно по крайней мере удалить белый фон изображения по умолчанию.

0