試圖在圖像上顯示文字

我試圖在我的網站的一部分中使用白色圓形矩形作爲背景。我試圖用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

試圖在圖像上顯示文字

回答

相關問題