2

ブロックで border-image プロパティを使用している場合、コンテンツが配置されるブロックの内部部分は透明のままです。

それは私のスプライト画像が完全に不透明な白い内部を持っている間です.

正しい背景を持つ内部 div を追加することで問題を回避できますが、それはエレガントではありません。追加のブロック回避策なしでスプライトの内部を表示する方法はありますか? ありがとう

問題のデモ ページ(Chrome で表示してください)

ソース：

   <style type="text/css">
    body { background: orange; padding: 30px; }
    .filling { background: white; height: inherit; margin-top: -16px; }
    .box {
        margin: auto auto;
        width: 200px; height: 200px;
        border-width: 31px 25px 25px 20px;
        -moz-border-image: url(image-border_sprite.png) 31 25 25 20 / 31px 25px 25px 20px stretch;
        -webkit-border-image: url(image-border_sprite.png) 31 25 25 20 / 31px 25px 25px 20px stretch;
        -o-border-image: url(image-border_sprite.png) 31 25 25 20 / 31px 25px 25px 20px stretch;
        border-image: url(image-border_sprite.png) 31 25 25 20 / 31px 25px 25px 20px stretch;
    }
</style>

<div class="box">
    <p>Why does the page background show through??</p>
</div>
<br /><br />
<div class="box">
    <div class="filling">
        <p>It should look like this!</p>
    </div>
</div>
4

3 に答える 3

0

同じ問題を抱えている人のために、私はもっと直接的な修正を見つけました：fillプロパティ。最近のborder-imageのドラフトでは、ボックスの内部を透明に保つようにデフォルトの動作が設定されているようです。画像スプライトから内部をレンダリングする場合は、塗りつぶしを追加する必要があります。例えば、

これを回します：border-image：url（image-border_sprite.png）31 25 25 20 / 31px 25px 25px 20px Stretch;

これに：border-image：url（image-border_sprite.png）31 25 25 20 fill / 31px 25px 25px 20px Stretch;

私のテストから、これは背景を追加してそれをパディングボックスにクリップする必要性を否定します（しかし答えに感謝します）。

于 2012-08-30T18:44:53.530 に答える
0

なぜそれが引き起こされたのかわかりません。おそらくクロムのバグです。

ただし、ここに修正があります。

.boxこれをcssに追加します

-moz-background-clip: padding-box;
-webkit-background-clip: padding-box;
background-clip: padding-box;
background-color: white;

これにより、白い背景色が追加され、その内容 (パディングを含む) にクリップされます。詳細についてbackground-clipは、こちらを参照してください。

作業例。

http://jsfiddle.net/blowsie/u8ctc/

于 2012-08-22T11:50:48.203 に答える
0

属性を持つクラスを使用しているときに、境界線で同じエラーが発生しました。属性を に変更すると、問題は簡単に解決しました。代わりに: CSS - img.pic1 {width...} htm -

私が使用した：

CSS - .pic1 {幅...} html =

それは私が持っていたすべての画像のバグを修正しました...

于 2013-07-14T11:03:59.693 に答える