0

所以我有 Chrome v20.xxx，我正在尝试使用 CSS3 和背景 url 使我的博客上的图像看起来像有阴影。它与 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？

谢谢你。

PS：如果您愿意，我可以将其粘贴到 jsfiddle 上。

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

更新#2：这里是 jsfiddle http://jsfiddle.net/gNtea/。奇怪的是，在 jsfiddle 中查看它时它可以完美运行，而不是在实时站点上。我认为这是相对路径问题，所以我将我的生产 CSS 切换为使用绝对路径，没有帮助。

更新＃3：我复制了网页的源代码，将其粘贴到 jsfiddle 上，它可以工作。我在实际的实时站点上查看该页面，它不起作用。怎么回事？http://jsfiddle.net/eXYS9/

4

2 回答 2

1

简单地说图像的高度=）

li.current-menu-item a {
background: url("../images/bg_menu.png") repeat-x;    
height: 35px;
}
于 2015-02-13T13:16:52.943 回答
0

span.img_wrapper { 背景： url('../images/et-image-sliderleft-shadow2.png') 没有重复左下角，url('./images/et-image-sliderright-shadow2.png') 没有- 重复右下角；底部填充：14px；}

使用..[两个点]而不是一个作为图像 url

于 2012-06-04T07:49:59.453 回答