背景圖片出現在Opera和Chrome的前景圖片上

2010-03-08 84 views 0 likes

我用背景圖片創建了一個小跨度。此背景圖像在前景圖像下方滾動。雖然這在IE和FF中完美工作，但在Opera和Chrome中無法使用。背景圖片出現在Opera和Chrome的前景圖片上

我已經把我的例子here。請看有4個小矩形的塊。

PLease建議解決方案。

來源

2010-03-08 user266307

它在IE8兼容模式下工作。在'普通'的IE8中，它和Chrome一樣破碎。這暗示着對盒子模型的誤解。 – xtofl 2010-03-08 11:43:46

回答

您需要將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標籤本身的原因嗎？這將是更一致的跨瀏覽器。

來源

2010-03-08 13:54:19 Emily

@Emily：雖然您的解決方案在FF，Opera和Safari中運行良好，但它在IE6和IE7中都會中斷。（我沒有IE8）。 – user266307 2010-03-08 14:40:57

@Emily：如何使用'inline-block'而不是'block'？ – user266307 2010-03-08 15:10:20

@Emily：「應用背景圖片到img標籤」工作。謝謝。 – user266307 2010-03-08 16:22:22

相關問題

11. div上的背景圖片
12. CSS背景圖片和默認背景？
13. SVG作爲背景圖片不出現
14. CSS btn - 不會出現背景圖片
15. Swift Button背景圖片沒有出現？
16. CSS背景圖片在Chrome不加載
17. iOS背景上傳圖片
18. Rails背景圖片上傳
19. 背景圖片與：之前和之後：
20. 背景圖片幻燈片？
21. 幻燈片背景圖片
22. 幻燈片背景圖片
23. Google Chrome背景抖動時的圖片
24. 和引擎背景圖片
25. UIImagePickerController和UIButton背景圖片
26. 背景圖片和Images.xcassets
27. 背景圖片和SEO
28. div和背景圖片？
29. 強制在其他背景圖片之前加載背景圖片
30. Jumbotron背景圖片