使div中的图像（不是背景img）重复？答案

【问题标题】：make image( not background img) in div repeat?使div中的图像（不是背景img）重复？
【发布时间】：2012-01-30 12:47:24
【问题描述】：

我正在尝试重复一个 div 中的图像并且没有背景图像，但还没有弄清楚如何。你能指点我一个解决方案吗？

我的代码如下所示：

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

【问题讨论】：

简短的回答是你不能——你想为此使用背景图片
那么，我可以通过将图像设置为 div 的背景图像来重复该图像吗？这能让我对齐图像吗？

标签： html css image repeat

【解决方案1】：

(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>

【讨论】：

【解决方案2】：

您已将repeat-y 用作style="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;
}

【讨论】：

【解决方案3】：

使用 div 来伪造它可能会更容易。只要确保在高度为空时设置高度，以便它实际出现。比如说你希望它高 50 像素，将 div 高度设置为 50 像素。

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

在您的样式表中添加背景及其属性、高度和宽度，以及您想到的任何定位。

【讨论】：

【解决方案4】：

没有 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;

【讨论】：

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