Question

我正在尝试重复一个div中的图像，而不是背景图像但是没有想到如何。你能指点我一个解决方案吗？

我的代码如下所示：

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

Answer 1

您已使用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;
}

Answer 2

不能使用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;

Answer 3

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

Answer 4

使用div来假装它可能更容易。如果它是空的，请确保设置高度，以便它实际显示。比如说你希望它高50px，将div高度设置为50px。

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

在你的样式表中，只需添加背景及其属性，高度和宽度，以及你想到的定位。

在div重复中制作图像（不是背景img）？

4 个答案: