Attempting to have text over an image
I am trying to have a white round rectangle as the background in part of my website. I have attempted this with CSS, but I cannot get the round rectangle to stretch or shrink to the size of the div.
My other attempt is below using an img element. I can now get my image to stretch dynamically according to how much text is in the div BUT now I cannot place any text over it.
Do you know how I can get text to appear over my background in column 2?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
<!--
body { background-color: red; }
.col1 { width: 20%; float: left; background-color: blue; }
.col2 { width: 60%; float: left; }
.col3 { width: 20%; float: left; background-color: yellow; }
#content { z-index: 10; }
#bk { z-index: 0; top: 0px; left: 0px; }
-->
</style>
</head>
<body>
<div class="col1">
abvdvf
</div>
<div class="col2">
<div id="content">
kjfdjkf
</div>
<img id="bk" src="i.png" width="100%" height="100%" /> <!-- Correctly resizes my picture but now I cant place any text over the pic -->
</div>
<div class="col3">
abvdvf
</di开发者_StackOverflow中文版v>
</body>
</html>
Try this as your #content CSS:
#content {
background: white;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height: 100%;
padding: 15px 0;
width: 100%;
}
The technique is using a CSS3 rule called border-radius. You should look into it. Also, you don't normally need to set z-index.
The usual technique is to have four images for each of the rounded corners, and use CSS to place these on the edges of the box (you may need extra dummy divs to make this work.) Having the browser stretch an img is ugly, to say the least.
加载中,请稍侯......
精彩评论