1

我想让标题覆盖图像。这很容易，但我希望它有一定的宽度，并且有块中的文本。这是我想要的图像：

在此处输入图像描述

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

4

7 回答 7

4

在这里查看一个活生生的例子。试试这个：

HTML：

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

​<strong>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;
}
​

编辑

在这个例子display: table-cell中，文本通过使用和vertical-align: bottom在父级上对齐到底部。

编辑 2

对于透明背景，使用 rgba()，如本例所示

编辑 3

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

于 2012-04-14T15:54:16.107 回答
2

可能需要进行一些调整才能完全得到您想要的外观，但这是一个起点。

<style>
    #image_container {
        position: relative;
        background-image: url(path/to/image) no-repeat;
        width: 500px;
        height: 500px;
    }
    #image_container .title {
        position: absolute;
        top: 300px;
        background: #000;
        background: rgba(0,0,0,0.75);
        color: white;
        font-size: 30px;
        font-weight: bold;
    }
</style>
<div id="image_container">
    <div class="title">
        <p>Some Text</p>
    </div>
</div>
于 2012-04-14T15:47:53.567 回答
2

jsFiddle 演示

HTML：

<div id="background">
    <span>A Movie in the Park:</span>
    <span>Kung Fu Panda</span>
</div>

CSS：

#background {
    background: url(http://css-tricks.com/examples/TypeOverImage/images/3754004820_91a5c238a0.jpg) no-repeat;
    width: 400px;
    height: 300px;
}

span {
    position:relative;
    clear:both;
    float:left;
    color:#fff;
    font-size:23px;
    font-weight:bold;
    top:150px;
    margin-top:-2px;
    background-color: #000;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 5px 15px;
}
于 2012-04-14T16:27:56.567 回答
1

这可能会让你开始：http: //jsfiddle.net/FyL6J/

没有理由必须使用 jQuery 来完成，但我发现.position()它很有帮助。

于 2012-04-14T15:54:58.900 回答
1

像这样的东西？http://jsfiddle.net/EcXZZ/

于 2012-04-14T15:55:50.123 回答
1

我看到的第一个也是最简单的方法是获取具有所需不透明度的 png 图像，例如标题背景不透明度为 40% 的 1x1 RGB(0,0,0) 像素，并以这种方式设置您的 CSS：

<style>
  .image_holder
  {
    position: absolute;
    left: 10px;
    top: 10px;
  }
  .image_holder > img
  {
    position: absolute;
    left: 0;
    top: 0;
  }
  .image_title_overlay
  {
    position: absolute;
    left: 0;
    top: 120px;
    background-image: url('images/black.40%opacity.1x1.png');
    color: 'white';
    padding: 10px 12px;
  }
</style>
<div class="image_holder">
  <img src="image_url.jpg"/>
  <p class="image_title_overlay">A Movie in the Park: <br/>Kung Fu Panda</p>
</div>
于 2012-04-14T15:57:13.157 回答
1

我会使用 rgba ......基本上是这样的：

span {
background-color: rgba(0, 0, 0, 0.4);
padding: 5px 17px;
}

http://jsfiddle.net/TCtR5/3/

于 2012-04-14T16:10:50.317 回答