0

このページhttp://wildlife.x-tremeteam.comでは、CSS の border-image プロパティと、縁が透明な .png 画像を使用して、div に「破れた紙」の外観を作成しています。私の Android (Samsung SIII) を除いて、デフォルトのブラウザーを使用しているか、Chrome アプリを使用しているかにかかわらず、うまく機能します。その上で、20px の境界線の内側と外側にわずかなエッジが見られます。興味深いことに、角にエッジが見えません。ボーダーのある div の背景は透明です。その中の div にのみ背景色を適用します。

デスクトップのブラウザー、テストに使用する iPhone、responsinator.com のすべてのレンダリングでは、画像の端が表示されません。

div の background-color プロパティと関係があるはずです。これを RED に設定すると、エッジが赤くなるからです。ただし、このプロパティを透明にしても削除されません。

CSS は次のとおりです。これには、役に立たなかったデフォルトの div プロパティも含まれています。

div {border: 0; border-style: none; }

.BoxGrunge {  
    border-color: #7777777; /* this won't really be seen */
    border-style: double;/* this won't really be seen */
    border-width: 20px 20px 20px 20px;
    -webkit-border-image: url(images/RippedEdgeWhiteTrans.png) 20 20 20 20 repeat;
    -moz-border-image: url(images/RippedEdgeWhiteTrans.png) 20 20 20 20 repeat;
    border-image: url(images/RippedEdgeWhiteTrans.png) 20 20 20 20 repeat;
    background-color: transparent; /* otherwise there is a white edge on Android */  /*THIS DOESN'T HELP */
    display: block !important;
    margin: 0 0 5px 0;
}

ありがとう、私はこれを何時間も見つめていて、理解できません。

4

1 に答える 1

0

やっと自分で見つけました。多くの場合。

これは、border-image プロパティの REPEAT 値でした。

さまざまな色の画像と div を使用して多くのテストを行った後、4 つの側面すべて (角ではない) が反対/間違った方向にもわずかに繰り返されていることに気付きました。そのため、私の画像が外側の端が透明なオレンジ色のボックスである場合、外側の端にオレンジ色の小さなスライバーが繰り返されていました. これは iPhone 6 では発生せず、Android とおそらく古い iPhone で発生しました。

つまり、トップの場合、画像は必要に応じて水平方向に繰り返されていました。しかし、それは垂直方向にも少しだけ繰り返されました。これはある種のAndroidのバグだと思います。

小さいメディア クエリの代わりに STRETCH を使用して修正しました。私はそれが好きではありませんが、それがうまくいきました。

于 2016-01-07T19:31:16.157 に答える