如何添加另一个标题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到图像？

回答

相关问题