标题背景包装

Question

好的，我对CSS非常有经验，但此时我很茫然。

我列出了我希望标题在photoshop中的样子：

alt text http://screensnapr.com/u/qz26q5.png

然而，我能用css接近它的最近的是：

alt text http://screensnapr.com/u/s7xi7a.png

我需要将黑色背景延伸到图像的边缘并在标题的右侧填充。

我希望你理解我的问题！感谢。

这是html：

<div class="glossary_image">
    <img src="<?php echo $custom_fields['image'][0]; ?>" />
    <div class="title">
        <h2><?php the_title(); ?></h2>
    </div>
</div>

和css：

.glossary_image {
    position: relative;
    height: 300px;
    width: 300px;
    margin-top:10px;
    margin-bottom: 10px;
}

.glossary_image .title {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 10px;
}

.glossary_image .title h2 {
    display: inline;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight:bold;
    line-height: 35px;
    color: #fff;
    text-transform:uppercase;
    background: #000;
}

Answer 1

从padding移除.glossary_image .title并将padding-right: 10px;添加到.glossary_image .title h2。
您可能还想将padding-top添加到h2。

Answer 2

您可以将图像作为div元素的背景，通过这样做，叠加定位应该没问题。