使用CSS在包含文本的图像前面划分？

Question

使用Photoshop我可以产生这种效果。我的问题是如何通过CSS实现这一目标？

谢谢。

Answer 1

使用一个数字标签，并在里面放置一个绝对位置的数字标题元素，这应该是正确的语义方式。 根据您的网站，您将使用ID或clases来定位这些元素

http://jsfiddle.net/MPB4H/

<强> HTML

<figure>
    <img src="http://i.stack.imgur.com/ejI6T.png"/>
    <figcaption>
        Here comes your text
    </figcaption>
</figure>

<强>的CSS：

    figure{
        position:relative;
    }
    figcaption{
        position: absolute;
        display: block;
        bottom: 65px;
        width: 100%;
        background-color: rgba(255,255,255,0.7);
        color: red;
        text-align: center;
        font-weight: bold;
    }

Answer 2

您的HTML将如下所示：

<div class="containter>
    <img class="image" src="car.jpg" />
    <div class="text>here goes your text</div>
</div>

这是你的CSS：

.container { position: relative; }
.containter .image { position: absolute; z-index: 1;}
.containter .text { position: absolute; z-index: 2; left: 0; bottom: 20px; }

问我是否知道为什么我写这些专栏。

Answer 3

检查一下。

Fiddle

<强> HTML

<div class="img-container">
    <img src="http://i.stack.imgur.com/ejI6T.png" />
    <span class="caption">Here goes text and text and text so on.........</span>
</div>

<强> CSS

.img-container{
    width:100%;
    position:relative;
}
.img-container img{
    width:100%;
}
.caption{
    width:100%;
    background:rgba(255,255,255,0.8);
    color:#CF0943;
    position:absolute;
    bottom:40%;
    font-weight:bold;
    padding:5px;
    font-family:"Calibri";
    font-size:18px;
    text-indent:80px;
}