在div重复中制作图像(不是背景img)?

dou*_*ale 14 html css image repeat

我试图重复一个div中的图像,没有背景图像但是没有想到如何.你能指点我一个解决方案吗?

我的代码看起来像这样:

<div id="rightflower">
<img src="/image/layout/lotus-dreapta.png" style="repeat-y; width: 200px;"/> 
</div>
Run Code Online (Sandbox Code Playgroud)

小智 6

你已经使用repeat-ystyle="background-repeat:repeat-y;width: 200px;",而不是style="repeat-y".

在图片标记内尝试此操作,或者您可以使用以下css作为div

.div_backgrndimg
{
    background-repeat: repeat-y;
    background-image: url("/image/layout/lotus-dreapta.png");
    width:200px;
}
Run Code Online (Sandbox Code Playgroud)


got*_*itz 5

没有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;"
Run Code Online (Sandbox Code Playgroud)

或者您实际上可以重复该图像,但重复多少次?

var $el = document.getElementById( 'rightflower' )
  , str = ""
  , imgHTML = $el.innerHTML
  , i, i2;
for( i=0,i2=10; i<i2; i++ ){
    str += imgHTML;
}
$el.innerHTML = str;
Run Code Online (Sandbox Code Playgroud)

  • 显然,如果您删除 img 元素并将图像放在背景中,您可以使用 CSS 更改它,我的答案是基于您不想/无法更改标记的假设 (2认同)