带内联和彩色背景的multilined pic标题

我试图在（透明）背景的pic上创建标题标题。到目前为止，我一直都不成功：当添加“内联”和“填充”时，文本偏移无法使用白色背景，并且线条不保持与一边对齐（当填充左边：10px时） - 上边线获得缩进。另外，当标题“中断”时，我更喜欢背景延续5行左右，超出行中的最后一个字。带内联和彩色背景的multilined pic标题

我的html到目前为止，它只是创建一个与pic相同宽度的标题框。

<div class="img_box"><a title="January travel news" href=""><img src=".../pic.jpg" width="238" height="165"><span class="intro">January travel news</span></a></div>

和CSS

.img_box { 位置：相对; display：block; width：185px; height：122px; }

.img_box img 
{ 
width: 185px; 
height: 122px; 
display: block; 
      } 


.img_box a 
{ 
    width: 185px; 
    height: 122px; 
    text-decoration: none;} 

.img_box a span.intro { 
     position: absolute; 
     color: #000; 
     line-height:12px; 
     background: #fff; 
     padding-top: 5px; 
     padding-left: 10px; 
     padding-right: 10px; 
     padding-bottom: 3px; 
     height: 25px; 
     bottom: 15px; 
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
     font-size: 12px; 
     font-weight: bold; }

来源

2012-01-30 Max

究竟是什么让你看起来像？ – laymanje 2012-01-30 20:34:28

像这样：http://www.flickr.com/photos/75576[email protected]/6791743181/in/photostream/lightbox/ – Max 2012-01-30 21:38:42

给这一个镜头：

的主要变化是使相对的支撑点位。所做的就是使其内部的跨度相对于其父（锚点）绝对定位。

也看看我为它做的jsfiddle。 http://jsfiddle.net/mLXda/

.img_box img { 
    width: 185px; 
    height: 122px; 
    display: block; 
} 


.img_box a 
{ 
    width: 185px; 
    height: 122px; 
    text-decoration: none; 
    position: relative; /* this is the most important line to add */ 
} 

.img_box .intro { 
    position: absolute; 
    color: #000; 
    background: #eee; 
    line-height:12px; 
    background: #eee; 
    margin: 10px; 
    padding: 10px; 
    height: 25px; 
    bottom: 15px; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    font-size: 12px; 
    font-weight: bold; 
}

来源

2012-01-30 22:22:30 laymanje

带内联和彩色背景的multilined pic标题

回答

相关问题