标题背景环绕

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

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

Answer 2

您可以将图像作为 div 元素的背景，这样做覆盖定位应该没有问题。