Question

所以我有Chrome v20.xxx，我正在尝试让我的博客上的图像看起来像一个投影，同时使用CSS3和背景网址。它与FF配合得很好，但背景图像并没有出现在Chrome上。我的伪代码如下：

<p>
    <a>
        <span class="img_wrapper">
            <img class="with-borders">
        </span>
    </a>
</p>

这是我的CSS：

img.with-borders, img.tn { 
    margin: 5px 0 0 0;
    padding: 8px;
    background: #f1f1f1;
    border: solid #777;
    border-width: 1px 2px 2px 1px;
    box-shadow: 0 15px 15px -15px rgba(0, 0, 0, 0.9);
    -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
span.img_wrapper {
    background: url('./images/et-image-sliderleft-shadow2.png') no-repeat left bottom, url('./images/et-image-sliderright-shadow2.png') no-repeat right bottom;
    padding-bottom: 14px;
}

Chrome似乎限制了背景图像的视图，包装器跨越多少，而Firefox忽略了这样的限制，让内部背景图像“溢出”内联元素，这正是我想要的。

请问，如何让它适用于Chrome？

谢谢。

P.S。：如果您愿意，我可以将其粘贴在jsfiddle上。

更新：屏幕截图：http://i.imgur.com/ISXDr.png

更新＃2：这是jsfiddle http://jsfiddle.net/gNtea/。奇怪的是，它在jsfiddle中查看时效果很好，而不是在live site上。我认为这是相对路径问题，所以我将生产CSS切换为使用绝对路径，没有帮助。

更新＃3：我复制了网页的源代码，粘贴在jsfiddle上，它可以工作。我查看实际网站上的页面，它不起作用。 WTF？ http://jsfiddle.net/eXYS9/

Answer 1

span.img_wrapper { background：'url（'../ images / et-image-sliderleft-shadow2.png'）no-repeat left bottom，url（'./ images / et-image-sliderright-shadow2.png'）no-repeat right bottom ; padding-bottom：14px; }

使用 .. [两个点] 而不是图片网址

Answer 2

只需将图像的高度设为=）

li.current-menu-item a {
background: url("../images/bg_menu.png") repeat-x;    
height: 35px;
}

CSS后台网址不与Chrome配合使用

2 个答案: