如何添加另一個標題div到圖像？

我想通過圖像添加兩個標題，周圍的Googling我能夠做的編碼後，但它僅適用於一個標題DIV，當我添加第二字幕DIV，它消失..如何添加另一個標題div到圖像？

我的代碼：

<style> 
.background_image 
{ 
background:url(1.jpg); 
width:420px;      
height:205px;     
border:1px solid #FFFF00;   
overflow:hidden;     
} 

.text_caption 
{ 
padding-left:2px;    
padding-top:0px;     
padding-right:2px;    
padding-bottom:2px;    
color:#fffff;     
font-size:30px;     
font-weight:bold;     
font-family:Trebuchet MS;    
text-decoration:none;  
margin-left:5px;     
margin-top:140px;     
} 

.text_caption2 
{ 
padding-left:4px;     
padding-top:0px;     
padding-right:4px;    
padding-bottom:0px;    
color:#000000;     
font-size:26px;     
font-weight:bold;     
font-family:Trebuchet MS;    
text-decoration:none;  
margin-left:5px;     
margin-top:150px;     
} 

</style> 

<div class="background_image"> 
<div class="text_caption">Caption 1</div> /* this works */ 
<div class="text_caption2">Caption 2</div> /* this caption disappears */ 

</div>

對此有何幫助？我的代碼有什麼問題？

來源

2013-03-31 Navi Gamage

你可以簡單地窩字幕到圖像，然後進行相對的字幕圖像絕對定位，這樣的：

HTML

<div class="background"> 
    <div class="text_caption">CAPTION 1</div> 
    <div class="text_caption2">CAPTION 2</div> 
</div>

CSS

.background { 
    position: relative; 
    width: 420px; 
    height: 205px; 
    background: transparent url(http://placehold.it/420x205) top left no-repeat; 
    border:1px solid #ffff00; 
    overflow:hidden; 
} 
.text_caption, .text_caption2 { 
    position: absolute; 
    font-weight: bold; 
    font-family: Trebuchet MS; 
    text-decoration: none; 
} 
.text_caption { 
    padding: 0 2px 2px; 
    left: 5px; 
    bottom: 30px; 
    color: #ffffff; 
    font-size: 30px; 
} 
.text_caption2 { 
    left: 10px; 
    bottom: 5px; 
    padding: 0 4px; 
    color:#000000; 
    font-size:26px; 
}

以這種方式更改HTML佈局，字幕將始終在第e相關的圖像，並將始終相對於其容器（圖像）進行定位。

進一步的增強可能是從.background類單獨的圖像，這樣就可以定義基本屬性的圖像容器，並添加一類爲要顯示的每個圖像自身的相對性（見代碼在我的小提琴）。

Here這個例子。

來源

2013-03-31 02:30:29 Ragnarokkr

是的，現在我知道了，現在兩個字幕都有固定位置，現在不會去這裏和那裏..謝謝你的回答和時間，Ragnarokkr 。 :) –

很高興有幫助。別客氣：） – Ragnarokkr

.text_caption2 { margin-top:150px }將它從div的底部推出並將溢出設置爲隱藏。

只要刪除該規則，你應該看到它。

來源

2013-03-31 01:55:02 thgaskell

是的，現在我明白了，非常感謝你的回答thgaskell .. –

如何添加另一個標題div到圖像？

回答

相關問題