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: Web ページのソース コードをコピーし、jsfiddle に貼り付けました。動作します。実際のライブ サイトでページを表示すると、機能しません。なんてこと？http://jsfiddle.net/eXYS9/

4

2 に答える 2

0

span.img_wrapper { background: url('../images/et-image-sliderleft-shadow2.png') no-repeat 左下、url('./images/et-image-sliderright-shadow2.png') no -右下を繰り返します。パディングボトム: 14px; }

画像の URL に 1 つではなく..[2 つのドット]を使用します

于 2012-06-04T07:49:59.453 に答える