1

縦にサイズ変更できる背景画像付きのパネルを作りたいです。したがって、単純なアイデアは、実際の画像をヘッダー、本文の繰り返し部分、フッターの 3 つの部分に分割することです。こんな感じです

<tr><td><div class='header'></div></td></tr>
<tr><td><div class='body'>whatever goes here</div></td></tr>
<tr><td><div class='footer'></div></td></tr>

.header {background:url(header.png); width:110px; height:20px;}
.footer {background:url(footer.png); width:110px; height:40px;}
.body {background:url(body-repeat.png); repeat-y; width:110px;}

そこで、100x100 の画像を 3 つの部分 (header.png - 100x20、footer.png - 100x40、および body-repeat.png - 100x1) にスライスします。

Ie9 と firefox ではすべて正常に動作します。また、100% ズームではクロムでさえ問題なく動作します。ただし、Chrome でズームを変更すると、画像がギザギザになります。つまり、3 つの部分から「接着」されていることがわかります。どうやらクロムはこれらの画像を異なる方法でスケーリングします。

だから私の質問は - これはどういうわけか修正できますか? または、背景画像でサイズ変更可能なパネルを作成する方法はありますか?

返信ありがとうございます。

4

1 に答える 1

0

そのテーブルと div にパディング、ボーダー、マージンを強制的に適用しないようにしてから、CSS3 の背景サイズ プロパティを追加してみてください。

.header {
background-image:url(header.png); 
background-size:110px 20px;
}

CSS 背景サイズ プロパティの詳細: http://www.w3schools.com/cssref/css3_pr_background-size.asp

レイアウト構造を作成するときは、テーブルを避けるようにしてください:)

編集： あなたも追加しようとすることができます

背景サイズ: カバー;

プロパティをページ全体の背景に適用して、背景画像が指定された領域の幅と高さの 100% に収まるようにします。

background-size に関する優れた非常に完全なチュートリアル: http://www.css3.info/preview/background-size/

于 2012-09-29T22:38:43.237 に答える