фоновое изображение появляется поверх изображения переднего плана в Opera и Chrome

StackOverflow https://stackoverflow.com/questions/2400884

  •  18-09-2019
  •  | 
  •  

Вопрос

У меня есть крошечный промежуток с фоновым изображением.Это фоновое изображение прокручивается под изображением переднего плана.Хотя это отлично работает в IE и FF, в Opera и Chrome это не работает.

Я привел свой пример здесь.Пожалуйста, посмотрите на блок с 4 маленькими прямоугольниками.

Пожалуйста, предложите решение.

Это было полезно?

Решение

Вам нужно добавить display:block к вашему промежутку. 

<span style="display:block; background: url(&quot;/resources/images/strength_bgr.gif&quot;) no-repeat scroll 0pt -20px transparent;">
  <img alt="test" src="/resources/images/strength.gif">
</span>

Встроенные элементы не имеют высоты или ширины, поэтому отображается весь фон, а не обрезается по размеру изображения.

Редактировать после комментариев

Есть ли какая-либо причина, по которой вы не можете применить фоновое изображение к самому тегу img?Это было бы более согласованным в кроссбраузерном режиме.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top