Javascript css如何在图像网格上放置文本和按钮？

此帖子已被删除，不再适用

Hope this will work...

HTML-

---

模型中的文本在单击时看起来像是去了某个地方，因此它是一个链接，而不是按钮。每个

.wrapper>div

都已经相对定位，使其成为任何绝对定位子对象的边界容器。因此，您可以添加到

.wrapper>div

的链接，并将其固定到每个网格单元的下角

您只需要添加以下内容。然后，您可以根据自己的喜好设计样式：

.wrapper>div>a{
位置：绝对位置；
底部：10px；
右：10px；
颜色：白色；
文字装饰：无；
}

然后是

HTML

：

.bed{
网格柱：1/-1；
网格行：1/-3；
}
.枕头{
网格柱：3；
网格行：1/3；
}
.厨房{
网格柱：3；
网格行：2/5；
}
1.客厅{
网格柱：1/3；
网格行：3/-1；
}
.沙发{
网格列开始：3；
网格行：5/-1；
}
.包装纸{
显示：网格；
网格模板列：3fr 2fr 3fr；
网格模板行：重复（8，1fr）；
填充物：5em；
网格间距：2.5em；
背景色：黑色；
高度：900px；
最大宽度：100%；
}
.wrapper>div{
位置：相对位置；
}
.wrapper>div>a{
位置：绝对位置；
底部：10px；
右：10px；
颜色：白色；
文字装饰：无；
}
.wrapper>div:：after{
位置：绝对位置；
转换：翻译（-50%，-50%）；
最高：50%；
左：50%；
背景色：黑色；
颜色：白色；
填充：.5rem；
}
.床{
网格柱：1/2；
网格行：1/3；
身高：110%；
宽度：100%；
}
.枕头{
网格柱：2；
网格行：1/3；
身高：110%；
宽度：90%；
}
.厨房{
网格柱：3；
网格行：2/5；
}
1.客厅{
网格柱：1/3；
网格行：3/-1；
}
.沙发{
网格列开始：3；
网格行：5/-1；
}
img{
宽度：100%；
身高：100%；
边界半径：20px；
}
身体{
背景色：黑色；
}
.集装箱{
位置：相对位置；
}
.标题部分{
边框底部：3倍实心#E5；
显示：内联块；
宽度：100%；
}
.主标题{
页边距底部：0；
字体大小：1.5rem；
浮动：左；
文本转换：大写；
}
.主标题：：之后{
边框底部：3px实心#552244；
内容：“；
显示：块；
利润底部：-3px；
填充：2px；
}

您的

HTML

没有语义。这不是使用

标签的方法。谢谢，这是否意味着只有箭头按钮可以单击？@LordJesus不，整个字符串和箭头都可以单击。哦，你是说我必须在每个img的div中添加的HTML？@LordJesus是的。为你更新了答案。你能看看我更新的帖子吗？似乎在移动布局中，使用媒体查询时，图像看起来很奇怪，即使它们组合在一起。
<div class="wrapper">
    <div class="bed">
        <span>[your text here]&nbsp;<button>[button]</button></span>
        <img src="{{asset('/images/Home_Bed.jpg')}}" alt="">
    </div>
    <div class="pillow">
        <span>[your text here]&nbsp;<button>[button]</button></span>
        <img src="{{asset('/images/Home_Pillow.jpg')}}" alt="">
    </div>
    <div class="kitchen">
        <span>[your text here]&nbsp;<button>[button]</button></span>
        <img src="{{asset('/images/Home_Kitchen.jpg')}}" alt="">
    </div>
    <div class="living-room">
        <span>[your text here]&nbsp;<button>[button]</button></span>
        <img src="{{asset('/images/Shop_Page.jpg')}}" alt="">
    </div>
    <div class="sofa">
        <span>[your text here]&nbsp;<button>[button]</button></span>
        <img src="{{asset('/images/Home_Sofa.jpg')}}" alt="">
    </div>
</div>

.wrapper > div {
    position: relative;
}
.wrapper div span {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 1;
}