开发者

Div with text overlay an image

开发者 https://www.devze.com 2022-12-22 08:59 出处:网络
I\'m tr开发者_开发知识库ying to figure out how to overlay a div on top of an image. Here\'s what I\'ve got so far, I\'m totally stuck and have been for a while.

I'm tr开发者_开发知识库ying to figure out how to overlay a div on top of an image.

Here's what I've got so far, I'm totally stuck and have been for a while.

http://wilwaldon.com/learning/slideshow.html

Any help would be greatly appreciated, thank you in advance.


Try adding position:absolute; on the overlay. You might also want to add background:transparent if you want the image to show through.


<style type="text/css">
.image{
 position:relative;
 width:1001px;
 height:257px;
 }
.overlay{
position:absolute;
left:0;
bottom:0;
width: 300px;
background-color: #fff;
z-index: 600;
}
</style>

Changes from original:

  1. Add dimensions of the image to the container, and set its position to relative

  2. Set overlay position to absolute and position it by top/bottom and left/right properties


You could set the image as the background of your Div.

background-image: url (blahblahblah);

0

精彩评论

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

关注公众号