javascript - 如何制作带背景的标题？

Question

我想让标题覆盖图像。这很简单，但我希望它有一定的宽度，并以 block 的形式显示文本。这是我想要的图片:

如果可能的话，我想在 CSS 中执行此操作，但我不介意使用 Javascript。

Answer 1

看直播example这里。试试这个:

HTML:

<div>
    <span>Hello world</span><br>
    <span>More text here</span>
</div>

CSS:

div {
    width: 400px;
    height: 400px;
    background-image: url(http://www.hotels.tv/london-hotels/images/destinations/1/w97654_8.jpg);
    background-repeat: no-repeat;
    background-image-width: 100%;

}
div span {
    font-size: 30px;
    position: relative;
    top: 100px;
    background-color: gray;
    color: white;
}
​

编辑

在此example ，文本通过在父级上使用 display: table-cell 和 vertical-align: bottom

与底部对齐

编辑 2

要获得透明背景，请使用 rgba()，如 example 中所示

编辑 3

要使文本右对齐，请在父项上设置 text-align: right，如 example 所示。