Question

我想在图片上添加两个字幕，在谷歌搜索后我能够编码但它只适用于一个字幕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>

对此有何帮助？我的代码怎么了？

Answer 1

.text_caption2 { margin-top:150px }将它从div的底部推出，溢出设置为隐藏。

只需删除该规则就可以看到它。

Answer 2

您可以简单地将标题嵌套到图像中，然后使图像相对并且字幕绝对定位，如下所示：

<强> 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布局，字幕将始终跟随相关图像，并始终相对于其容器（图像）定位。

进一步的增强可能是将图像与.background类分开，以便您可以为图像容器定义基本属性，并为要显示的每个图像添加一个具有自己相对属性的类（请参阅代码在我的小提琴中。）

Here示例。

如何为图像添加另一个标题div？

2 个答案: