web-dev-qa-db-ja.com

divの画像（背景imgではない）を繰り返しますか？

Divにあり、背景画像はないが、方法がわからない画像を繰り返します。解決策を教えてください。

私のコードは次のようになります。

<div id="rightflower">
<img src="/image/layout/Lotus-dreapta.png" style="repeat-y; width: 200px;"/> 
</div>
htmlcssimagerepeat
14
douaberigoale

repeat-y なので style="background-repeat:repeat-y;width: 200px;" の代わりに style="repeat-y"。

これを画像タグ内で試すか、divに以下のcssを使用できます

.div_backgrndimg
{
    background-repeat: repeat-y;
    background-image: url("/image/layout/Lotus-dreapta.png");
    width:200px;
}
6
Boopathi

（ [〜＃〜] demo [〜＃〜] ）
コード：

.backimage {width:99%;  height:98%;  position:absolute;    background:transparent url("http://upload.wikimedia.org/wikipedia/commons/4/41/Brickwall_texture.jpg") repeat scroll 0% 0%;  }

そして

<div>
    <div class="backimage"></div>
    YOUR OTHER CONTENTTT
</div>
3
T.Todua

CSSではできません。 JSを使用する必要があります。 imgをバックグラウンドにコピーする簡単な例：

var $el = document.getElementById( 'rightflower' )
  , $img = $el.getElementsByTagName( 'img' )[0]
  , src  = $img.src

$el.innerHTML = "";
$el.style.background = "url( " + src + " ) repeat-y;"

または、実際に画像を繰り返すことができますが、何回ですか？

var $el = document.getElementById( 'rightflower' )
  , str = ""
  , imgHTML = $el.innerHTML
  , i, i2;
for( i=0,i2=10; i<i2; i++ ){
    str += imgHTML;
}
$el.innerHTML = str;
3
gotofritz

おそらくdivを使用するだけで、それを偽装する方が簡単でしょう。実際に表示されるように、空の場合は必ず高さを設定してください。たとえば、divの高さを50pxに設定して、高さを50pxにしたいとします。

<div id="rightflower">
<div id="divImg"></div> 
</div>

そしてスタイルシートに、背景とそのプロパティ、高さと幅、そしてあなたが念頭に置いていたものを追加するだけです。

2
Rooster