Question

我想让标题叠加图像。这很容易，但我希望它是一定的宽度，并将文本放在块中。这是我想要的图像：

enter image description here

如果可能的话，我想在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

Answer 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>

Answer 3

jsFiddle demo

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

Answer 4

这可能会让您入门：http://jsfiddle.net/FyL6J/

没有理由为什么必须使用jQuery来完成，但我发现.position()会有所帮助。

Answer 5

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

Answer 6

我看到的第一个也是最简单的方法是获得一个具有所需不透明度的png图像，例如标题背景为1x1 RGB（0,0,0）像素，不透明度为40％，并设置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>

Answer 7

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

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

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

如何制作背景标题？

7 个答案:

jsFiddle demo