html - 带有内联和彩色背景的多线图片说明

Question

我正在尝试在具有(透明)背景的图片上创建标题标题。到目前为止，我一直很不成功:当添加“内联”和“填充”时，文本会在没有白色背景的情况下移动，并且线条不会保持与一侧对齐(当向左填充时:10px) - 上线得到一个缩进。此外，当标题“中断”时，我更喜欢背景在该行的最后一个单词之后继续 5 像素左右。

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

<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 { position:relative； 显示: block ； 宽度:185px； 高度: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; }

Answer 1

试一试:

主要的变化是使 anchor 位置相对。这样做的目的是使其内部的跨度相对于其父项( anchor )定位为绝对位置。

另请看我为它制作的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; 
}