0
배경 이미지가있는 작은 스팬이 있습니다. 이 배경 이미지는 전경 이미지 아래로 스크롤됩니다. IE와 FF에서는 완벽하게 작동하지만 Opera와 Chrome에서는 작동하지 않습니다.Opera와 Chrome의 배경 이미지 위에 배경 이미지가 나타납니다.
예제를 here에 넣었습니다. 4 개의 작은 직사각형이있는 블록을 봅니다.
제안 솔루션.
A
답변
1
범위에 display:block을 추가해야합니다.
<span style="display:block; background: url("/resources/images/strength_bgr.gif") no-repeat scroll 0pt -20px transparent;">
<img alt="test" src="/resources/images/strength.gif">
</span>
인라인 요소의 높이 또는 너비가 없기 때문에 전체 배경이 이미지 크기에 의해 잘리는 대신 표시됩니다. 댓글 후
편집
당신은 img 태그 자체에 배경 이미지를 적용 할 수없는 이유가 있나요? 더 일관성있는 크로스 브라우저가 될 것입니다.
+0
@Emily : 귀하의 솔루션은 FF, Opera 및 Safari에서 훌륭하게 작동하지만 IE6 및 IE7에서는 문제가 없습니다. (저는 IE8이 없습니다). – user266307
+0
@Emily : '블록'대신 '인라인 블록'을 사용하는 것이 어떻습니까? – user266307
+0
@Emily : "img 태그에 배경 이미지 적용"이 효과적입니다. 감사. – user266307
관련 문제
- 1. 이미지 위에 선이있는 배경
- 2. 배경 위에 불투명 이미지 오버레이
- 3. 배경 화면 이미지 위에 검은 딸기 이미지
- 4. 그라데이션 배경 위에 배경 이미지를 표시하는 방법
- 5. Android : 배경 이미지 위에 애니메이션을 적용하는 방법
- 6. 이미지 배경 위에 텍스트를 오버레이하고 PDF로 변환
- 7. UITableViewController 배경 이미지가 늘어납니다.
- 8. UIView 배경 이미지가 부숴졌습니다.
- 9. 오버랩 배경 이미지
- 10. CSS 배경 이미지 문제 (이미지가 표시되지 않음)
- 11. CSS - 내가 백그라운드에서이 이미지가 배경 이미지
- 12. 이미지 하이퍼 링크에 배경 이미지가 표시되게하려면 어떻게해야합니까?
- 13. 이미지 맵의 배경 이미지
- 14. 이미지로드시 배경 이미지 제거
- 15. 배경 이미지가 간략하게 표시됩니다.
- 16. css3로 배경 이미지가 흐려짐
- 17. 파노라마 배경 이미지가 흐림
- 18. 탐색 모음 배경 이미지
- 19. 배경 이미지
- 20. 이미지 배경
- 21. 배경 이미지
- 22. UIProgressView 배경 이미지
- 23. 배경 이미지가 dompdf에 표시되지 않습니다.
- 24. 배경 이미지 품질
- 25. 이미지가 배경 인 경우 TabControl이 깜박입니다.
- 26. CSS 배경 이미지 이동
- 27. LWUIT : 양식의 배경 이미지
- 28. .aspx 페이지의 배경 이미지
- 29. 여러 이미지 선택 배경 이미지
- 30. MoreNavigationController의 배경 이미지
IE8 호환 모드에서 작동합니다. '평범한'IE8에서는 크롬처럼 손상되었습니다. 이것은 박스 모델의 잘못된 해석의 방향을 암시한다. – xtofl