开发者

How i can set the background image of image?

开发者 https://www.devze.com 2023-03-17 15:42 出处:网络
I have a image who\'s width and height i got in Javascript. i want to set the background image o开发者_如何学Gon image.

I have a image who's width and height i got in Javascript. i want to set the background image o开发者_如何学Gon image.

means to the background image is look like image as youtube show the image on video called play icon.

i want to show them on image. can someone tell me how i can set playicon over the image.


I didn't understand exactly your question. I suppose you want to place img over a background-image if yes check the following example:

html

<div>
    <img id="play" src="http://dummyimage.com/40x40/454/000&text=Play">
    <img id="pause" src="http://dummyimage.com/40x40/848/000&text=Pause">
</div>

css

div {background:url("http://dummyimage.com/300x300/000/fff&text=video") no-repeat;
    height:300px;
    width:300px;
    position:relative;
}
img#play {
    position:absolute;
    bottom:0;   
}
img#pause {
    position:absolute;
    bottom:0;
    left:40px;
}

Demo: http://jsfiddle.net/ACazB/

div has position:relative and imgs inside div have position:absolute. This will allow you to manipulate the position of any images in the scope of div. Using box offsets top, bottom,left,right you can move the images in the place you need.

http://css-tricks.com/791-absolute-positioning-inside-relative-positioning/

http://www.w3.org/TR/CSS2/visuren.html#position-props

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号