gpt4 book ai didi

html - 响应式图像马赛克作为 CSS/HTML 中的背景 - 需要边框和捕获文本

转载 作者:太空宇宙 更新时间:2023-11-04 07:04:26 27 4
gpt4 key购买 nike

我已经创建了响应式图像马赛克(作为 div 背景)。问题是我无法添加边框和标题文本。在下面的照片中,您可以看到实际结果和期望的结果。

enter image description here

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

最佳答案

写一些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/

关于html - 响应式图像马赛克作为 CSS/HTML 中的背景 - 需要边框和捕获文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51725265/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com