试图在图像上显示文字

我试图在我的网站的一部分中使用白色圆形矩形作为背景。我试图用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>

来源

2011-03-07 Mack

常用的技术是有四个图像的每个圆角，并使用CSS来放置这些包装盒上的边缘（您可能需要额外的虚拟div s到使这项工作。）具有浏览器拉伸img是丑陋的，至少可以说。

来源

2011-03-07 02:56:50

+1，因为HTML Purifier非常棒。哦，你的回答是有道理的。 – thirtydot 2011-03-07 03:06:22

试试这个作为你的＃内容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。

来源

2011-03-07 03:12:36 painteddigital

试图在图像上显示文字

回答

相关问题