4

コンテンツの高さに合わせてスケーリングするコンテナDIVがあります。それはパターンを作ることを繰り返す背景画像を持っています。

問題は、繰り返しの背景画像がdivの下部で切り取られることです。

背景画像が途切れないように指示する方法はありますか？

コードは次のとおりです：http：//jsfiddle.net/WkEKD/7/

ありがとう

4

5 に答える 5

5

divの高さ（heightがautoの場合に計算される）が背景画像の高さの倍数でない場合、それは切り取られます（overflow: visible背景画像には適用されません）。2つの可能な解決策は次のとおりです。

  1. DIVの高さが背景画像の高さの倍数であることを確認してください
  2. background-sizeプロパティ（CSS3のみ）を使用して、DIVを埋めるために背景画像を拡大縮小します（該当する場合）
  3. JSを少し使用して、DIVの高さを背景画像の高さの最も近い倍数に設定します（つまり、基本的に1と同じですが、JS経由で）

オプション＃3のコード

デモ： http： //jsfiddle.net/h6tUs/2/

var img = new Image();
img.onload = function() {
    adjustHeight(img.height);
};
img.src = 'http://www.jamfactory.co.za/left.png';
if(img.complete) {
    adjustHeight(img.height);
}
function adjustHeight(_imgHeight) {
    var ht = $('#container').outerHeight(false);
    ht = ht + (ht % _imgHeight);
    $('#container').height(ht);    
}

上記のコードはあなたの中に入るはずです$(document).ready(...)

于 2012-07-09T07:41:59.673 に答える
1

この問題の1つの線の解決策は、線の高さを背景画像の高さと同じに設定することです。line-height: 20px;

フィドル-http://jsfiddle.net/WkEKD/10/

#container {
margin:0 auto;
width:20px;
background:url('http://www.jamfactory.co.za/left.png') 0 0;
    line-height: 20px;
}
于 2012-07-09T08:03:20.493 に答える
0

divのコンテンツがテキストのみの場合、cssのline-heightパラメーターをタイル状の背景画像の高さの何分の1かに微調整できますか？

于 2012-07-09T07:37:07.163 に答える
0

あなたの問題には多くの可能な解決策があります。

トムCが言ったように、背景の高さに合わせて線の高さを変更するだけで済みます。

例： http： //jsfiddle.net/Nr2ca/1/

より良い解決策は、各行をサブ要素にして、これらのそれぞれに背景を適用することです。（ナビゲーションを作成する場合は、順序付けされていないリストを使用してください）

于 2012-07-09T07:54:22.050 に答える
0

CSS以下に述べるような簡単な方法で、簡単に希望の結果を得ることができます：-

CSS

body {background-color:#000}
#container {
margin:0 auto;
width:20px;
background:url('http://www.jamfactory.co.za/left.png') repeat-y 0 0;
}

HTML

<div id="container">
  <p><br/></p>
    <p><br/></p>
    <p><br/></p>
    <p><br/></p>
    <p><br/></p>
    <p><br/></p>
    <p><br/></p>
</div>

onや。background-repeatのように画像をどのように繰り返すかについての値を常に定義する必要があります。これらの値を定義する場合は、要件に従って画像が完全に繰り返されることを願っています。x-axisy-axis

デモを見る：-http: //tinkerbin.com/1kg6u3PW

于 2012-07-09T11:27:15.193 に答える