试图在图像上显示文字
问题描述:
我试图在我的网站的一部分中使用白色圆形矩形作为背景。我试图用CSS,但我无法得到圆形矩形伸展或缩小到div的大小。试图在图像上显示文字
我的另一个尝试是在下面使用img元素。现在我可以根据div中的文本的多少来动态拉伸图像,现在我无法在其上放置任何文本。
你知道我如何让文本出现在第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
</div>
</body>
</html>
答
常用的技术是有四个图像的每个圆角,并使用CSS来放置这些包装盒上的边缘(您可能需要额外的虚拟div
s到使这项工作。)具有浏览器拉伸img是丑陋的,至少可以说。
答
试试这个作为你的#内容CSS:
#content {
background: white;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height: 100%;
padding: 15px 0;
width: 100%;
}
的技术是使用所谓的边框半径的CSS3规则。你应该看看它。另外,您通常不需要设置z-index。
+1,因为HTML Purifier非常棒。哦,你的回答是有道理的。 – thirtydot 2011-03-07 03:06:22