2

次のCSSクラスをサイトのフッターに適用して、背景画像と上部に3pxの3トーンの境界線の両方を表示しています。

.site-footer {
    background-image: url(../img/footer-background.png);
    background-repeat: repeat;
    border-width: 3px 0px 0px;
    padding: 15px 0;
}

.border-image {
    -webkit-border-image: url(../img/footer-border-hr.png) 2 0 0 0 repeat;
       -moz-border-image: url(../img/footer-border-hr.png) 2 0 0 0 repeat;
         -o-border-image: url(../img/footer-border-hr.png) 2 0 0 0 repeat;
            border-image: url(../img/footer-border-hr.png) 2 0 0 0 repeat;
            border-width: 2px 0px 0px 0px;
}

Chrome（18）では問題ありませんが、Firefox（Mac 10.0.2および11）Safari（Macバージョン5.1.5（7534.55.3））およびOpera（Mac 11.62）では背景が真っ白です。inspect要素を介してborder-imageを削除すると、背景が復元されます。ボーダー画像は基本的に背景画像としてレンダリングされるため、背景が上書きされていると思いますが、回避策を知っている人はいますか？

4

1 に答える 1

2

白い背景が表示されているのは、おそらくボーダー画像の中央部分が白で、背景画像の上に描画されており、ほとんどのブラウザーがキーワードを追加する前に実験的なバージョンを実装していたためborder-imageです。fill

仕様が説明しているように：

'fill' キーワードが存在する場合、境界イメージの中央部分が保持されます。(デフォルトでは破棄されます。つまり、空として扱われます。)

この fill キーワードをサポートしていないブラウザー (少なくとも Opera と Firefoxはサポートしていませんが、Firefox はバージョン 12 以降でサポートする予定です) は、ボーダー画像の中央を破棄せず、背景の上に描画します.

PNG を使用しているため、ボーダー画像の中央部分が透明であることを確認できます。これにより、背景が透けて見えるはずです。

于 2012-04-16T15:51:25.390 に答える