Ik probeer een afbeelding te herhalen die in een div staat en geen achtergrondafbeelding, maar ik heb niet bedacht hoe. Kunt u mij een oplossing wijzen?
Mijn code ziet er als volgt uit:
<div id="rightflower">
<img src="/image/layout/lotus-dreapta.png" style="repeat-y; width: 200px;"/>
</div>
Antwoord 1, autoriteit 100%
Je moet repeat-y
gebruiken als style="background-repeat:repeat-y;width: 200px;"
in plaats van style="repeat-y"
.
Probeer dit binnen de afbeeldingstag of je kunt de onderstaande css gebruiken voor de div
.div_backgrndimg
{
background-repeat: repeat-y;
background-image: url("/image/layout/lotus-dreapta.png");
width:200px;
}
Antwoord 2, autoriteit 40%
Niet met CSS kan dat niet. Je moet JS gebruiken. Een snel voorbeeld van het kopiëren van de img naar de achtergrond:
var $el = document.getElementById( 'rightflower' )
, $img = $el.getElementsByTagName( 'img' )[0]
, src = $img.src
$el.innerHTML = "";
$el.style.background = "url( " + src + " ) repeat-y;"
Of je kunt de afbeelding eigenlijk herhalen, maar hoe vaak?
var $el = document.getElementById( 'rightflower' )
, str = ""
, imgHTML = $el.innerHTML
, i, i2;
for( i=0,i2=10; i<i2; i++ ){
str += imgHTML;
}
$el.innerHTML = str;
Antwoord 3, autoriteit 40%
(DEMO)
Codes:
.backimage {
width:99%;
height:98%;
position:absolute;
background:transparent url("https://upload.wikimedia.org/wikipedia/commons/4/41/Brickwall_texture.jpg")
repeat scroll 0% 0%;
}
en
<div>
<div class="backimage"></div>
YOUR OTHER CONTENTTT
</div>
Antwoord 4, Autoriteit 20%
Het zou waarschijnlijk gemakkelijker zijn om het gewoon te neppen door een div te gebruiken. Zorg ervoor dat u de hoogte instelt als het leeg is, zodat deze daadwerkelijk kan verschijnen. Zeg bijvoorbeeld dat je het wilt dat het 50px lang is geplaatst de div-hoogte tot 50px.
<div id="rightflower">
<div id="divImg"></div>
</div>
En in uw stijlblad voeg gewoon de achtergrond en de eigenschappen, de hoogte en breedte toe en welke positionering u in gedachten had.