0

我想在图像上添加两个标题，在谷歌搜索后我能够进行编码，但它仅适用于一个标题 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>

有什么帮助吗？我的代码有什么问题？

4

2 回答 2

1

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

只需删除该规则，您就会看到它。

于 2013-03-31T01:55:02.447 回答
1

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

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

A further enhancement could be to separate image from .background class, so that you could define base properties to the image container, and add a class with its own relative properties for every image you want to display (see the code in my fiddle).

Here the example.

于 2013-03-31T02:30:29.040 回答