背景图片出现在Opera和Chrome的前景图片上

2010-03-08 85 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

背景图片出现在Opera和Chrome的前景图片上

回答

相关问题