我想在我的部分网站中使用白色的圆形 矩形作为背景。我已尝试使用 CSS 进行此操作，但我无法让圆 Angular 矩形拉伸(stretch)或缩小到 div 的大小。
我的另一个尝试是使用 img 元素。我现在可以让我的图像根据 div 中的文本量动态拉伸(stretch)但是现在我不能在它上面放置任何文本。
您知道如何让文本显示在第 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>
最佳答案
试试这个作为你的#content CSS:
#content {
background: white;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height: 100%;
padding: 15px 0;
width: 100%;
}
该技术使用名为 border-radius 的 CSS3 规则。你应该调查一下。此外，您通常不需要设置 z-index。
关于javascript - 尝试在图像上添加文字，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5215348/