在CSS / HTML中将图像作为背景的自适应马赛克-需要边框和捕获文本

Question

我创建了图像的自适应马赛克（作为div背景）。问题是我无法添加边框和标题文本。在下面的照片中，您可以看到实际结果和所需结果。

Jsfiddle

我需要边框：

＃foto1 -border-right:2px solid #fff;

＃foto2 -border-bottom:2px solid #fff;

我在#foto1和#foto3上添加了边框，但是它们没有出现。

容器.caption应包含标题文本。当我输入一些文本时，容器会更改其高度。我需要它保持相同的高度。

HTML

<div class="table">
<div class="tablerow">

<div class="tablecell">

<a href="#">
<div id="foto1" style="padding-top:100%;background:url(http://files.softicons.com/download/web-icons/simplistic-collection-icons-by-mediajon/png/48x48/lock.png) center no-repeat,url(https://www.canarias7.es/binrepository/768x513/0c33/768d432/none/11314/UVTR/image_content_3669106_20180619165415.jpg) center no-repeat;background-size:auto, cover;"> 
<div class="caption">
</div>
</div>
</a>

</div>
<div class="tablecell">

<a href="#">
<div id="foto2" style="padding-top:50%;background:url(http://files.softicons.com/download/web-icons/simplistic-collection-icons-by-mediajon/png/48x48/lock.png) center no-repeat,url(https://www.canarias7.es/binrepository/768x513/0c0/768d432/none/11314/VMNM/180731ftv-carretera-corralejo-8melian_3847760_20180804162359.jpg) center no-repeat;background-size:auto, cover;">
<div class="caption">
</div>
</div>
</a>

<a href="#">
<div id="foto3" style="padding-top:50%;background:url(http://files.softicons.com/download/web-icons/simplistic-collection-icons-by-mediajon/png/48x48/lock.png) center no-repeat,url(https://www.canarias7.es/binrepository/768x512/0c40/768d432/none/11314/TKDX/papas-diez-tipos_3850905_20180807065646.jpg) center no-repeat;background-size:auto, cover;"> 
<div class="caption">
</div>
</div>
</a>
</div>

</div></div>

CSS

.table{display:table;width:70%;}
.tablerow{display:table-row;}
.tablecell{display:table-cell;width:50%;vertical-align:top;}

Answer 1

编写一些CSS

.table {
  display:table;
  width:70%; }
.tablerow {
  display:table-row;
}
.tablecell {
  display:table-cell;
  width:50%;
  vertical-align:top;
}
.tablecell a div:not (.caption) {
  position:relative;
}
.caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  background: rgba(255,255,255,0.7);
  padding: 5px;
  color: #000;
  border-radius: 2px;
  line-height: 1.2;
}
#foto1 {
  border-right:2px solid #fff;
}
#foto2 {
  border-bottom:2px solid #fff;
}

<div class="table">
  <div class="tablerow">
    <div class="tablecell">
      <a href="#">
        <div id="foto1" style="padding-top:100%;background:url(http://files.softicons.com/download/web-icons/simplistic-collection-icons-by-mediajon/png/48x48/lock.png) center no-repeat,url(https://www.canarias7.es/binrepository/768x513/0c33/768d432/none/11314/UVTR/image_content_3669106_20180619165415.jpg) center no-repeat;background-size:auto, cover;"> 
          <div class="caption">caption Text</div>
        </div>
      </a>
    </div>
  <div class="tablecell">
  <a href="#">
    <div id="foto2" style="padding-top:50%;background:url(http://files.softicons.com/download/web-icons/simplistic-collection-icons-by-mediajon/png/48x48/lock.png) center no-repeat,url(https://www.canarias7.es/binrepository/768x513/0c0/768d432/none/11314/VMNM/180731ftv-carretera-corralejo-8melian_3847760_20180804162359.jpg) center no-repeat;background-size:auto, cover;">
      <div class="caption">caption Text</div>
    </div>
  </a>
  <a href="#">
     <div id="foto3" style="padding-top:50%;background:url(http://files.softicons.com/download/web-icons/simplistic-collection-icons-by-mediajon/png/48x48/lock.png) center no-repeat,url(https://www.canarias7.es/binrepository/768x512/0c40/768d432/none/11314/TKDX/papas-diez-tipos_3850905_20180807065646.jpg) center no-repeat;background-size:auto, cover;"> 
      <div class="caption">caption Text</div>
    </div>
  </a>
</div>
  </div>
</div>

https://jsfiddle.net/c2a4zh38/39/