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 { 位置：相对; 显示：块; 宽度：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

试一试：

主要变化是使锚位置相对。这样做是使其内部的跨度相对于其父（锚）定位。

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

多线图片标题与内联和彩色背景

1 个答案: