Html 使图像(不是背景 img)在 div 中重复?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8679066/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 12:13:12  来源:igfitidea点击:

make image( not background img) in div repeat?

htmlcssimagerepeat

提问by douaberigoale

I'm trying to repeat-y an image that's in a div and no background image but haven't figured how. Could you please point me to a solution?

我正在尝试重复一个位于 div 中且没有背景图像但不知道如何操作的图像。你能指出我的解决方案吗?

My code looks like this:

我的代码如下所示:

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

采纳答案by Boopathi

You have use to repeat-yas style="background-repeat:repeat-y;width: 200px;"instead of style="repeat-y".

您必须使用repeat-yasstyle="background-repeat:repeat-y;width: 200px;"而不是style="repeat-y"

Try this inside the image tag or you can use the below css for the div

在图像标签中试试这个,或者你可以使用下面的 css 作为 div

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

回答by gotofritz

Not with CSS you can't. You need to use JS. A quick example copying the img to the background:

不是 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;"

Or you can actually repeat the image, but how many times?

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

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

回答by T.Todua

(DEMO)
Codes:

演示
代码

.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%;  }

and

<div>
    <div class="backimage"></div>
    YOUR OTHER CONTENTTT
</div>

回答by Rooster

It would probably be easier to just fake it by using a div. Just make sure you set the height if its empty so that it can actually appear. Say for instance you want it to be 50px tall set the div height to 50px.

通过使用 div 来伪造它可能会更容易。只要确保你设置了高度,如果它是空的,那么它就可以实际出现。比如说你希望它是 50px 高,将 div 高度设置为 50px。

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

And in your style sheet just add the background and its properties, height and width, and what ever positioning you had in mind.

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