CSS - 图像上的文字

Question

我有这样的图像：

网站响应迅速。因此，下面的问题需要遵循figcaption上的图像大小。

我需要知道是否可以将两个图标放在图像中。两个文本（左边3行，右边3行）和管道ico使用HTML / CSS划分文本。

有谁知道我该怎么做？

Answer 1

你可以让它像这样响应：

http://jsfiddle.net/DaSa7/

<强> HTML

<div class="container">
<div class="panel">
    <img src="http://placehold.it/350x150/FFF/000" />
    <div class="panel-body">
        <div class="left"><img src="http://placehold.it/50x50/AEA/000" />
            <div class="box-text">
                <h2>Endereco</h2>
                <h2>Test1</h2>
                <h2>Test2</h2>
            </div>
        </div>
        <div class="right">
            <img src="http://placehold.it/50x50/AEA/000" />
            <div class="box-text">
                <h2>Endereco</h2>
                <h2>Test1</h2>
                <h2>Test2</h2>
            </div>
        </div>
    </div>
</div>
</div>

<强> CSS

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }
html,body{height:100%;}
img{width:100%;height:auto;}

.container{height:100%;}

.panel {
    position:relative;
    top:0;
    left:0;
    z-index:1;
    width: 100%;
    height: 100%;
    min-height:100%;     
}
.panel-body {
    height: 50%;
    width:100%;
    position:absolute;
    bottom:0;
    left:0;
    z-index:2;
    background:red;
}
.left,.right{
    width:50%;
    display:inline-block;
    height:100%;
    float:left;
}
.left img,.right img{
    width:40%;
    height:100%;
    float:left;
}
.box-text{float:left;}