css-如何在圖像網格上放置文本和按鈕？

Question

該帖子已被刪除，不再適用

Answer 1

您的模型中的文本在單擊時看起來像是在某個地方，因此它是一個鏈接，而不是一個按鈕。 每個.wrapper > div已經相對定位，使其成為任何絕對定位子項的邊界容器。 因此，您可以添加到.wrapper > div的鏈接並將其固定到每個網格單元的底角。

您只需要添加以下內容。 然后，您可以根據自己的喜好設計樣式：

.wrapper>div>a {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: white;
  text-decoration: none;
}

然后是HTML ：

<div class=" bed">
  <img src="{{asset('/images/Home_Bed.jpg')}}" alt="">
  <a href="#">Label <span class="">➡</span></a>
</div>

 .bed { grid-column: 1/-1; grid-row: 1 / -3; } .pillow { grid-column: 3; grid-row: 1 / 3; } .kitchen { grid-column: 3; grid-row: 2 / 5; } .living-room { grid-column: 1 / 3; grid-row: 3 / -1; } .sofa { grid-column-start: 3; grid-row: 5 / -1; } .wrapper { display: grid; grid-template-columns: 3fr 2fr 3fr; grid-template-rows: repeat(8, 1fr); padding: 5em; grid-gap: 2.5em; background-color: black; height: 900px; max-width: 100%; } .wrapper>div { position: relative; } .wrapper>div>a { position: absolute; bottom: 10px; right: 10px; color: white; text-decoration: none; } .wrapper>div::after { position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; background-color: black; color: white; padding: .5rem; } .bed { grid-column: 1/2; grid-row: 1/3; height: 110%; width: 100%; } .pillow { grid-column: 2; grid-row: 1 / 3; height: 110%; width: 90%; } .kitchen { grid-column: 3; grid-row: 2 / 5; } .living-room { grid-column: 1 / 3; grid-row: 3 / -1; } .sofa { grid-column-start: 3; grid-row: 5 / -1; } img { width: 100%; height: 100%; border-radius: 20px; } body { background-color: black; } .container { position: relative; } .heading-part { border-bottom: 3px solid #e5e5e5; display: inline-block; width: 100%; } .main-title { margin-bottom: 0; font-size: 1.5rem; float: left; text-transform: uppercase; } .main-title::after { border-bottom: 3px solid #552244; content: ""; display: block; margin-bottom: -3px; padding: 2px; }

 <div class="wrapper"> <div class=" bed"> <img src="{{asset('/images/Home_Bed.jpg')}}" alt=""> <a href="#">Label <span class="">➡</span></a> </div> <div class="pillow"><img src="{{asset('/images/Home_Pillow.jpg')}}" alt=""><a href="#">Label <span class="">➡</span></a></div> <div class=" kitchen"><img src="{{asset('/images/Home_Kitchen.jpg')}}" alt=""><a href="#">Label <span class="">➡</span></a></div> <div class=" living-room"><img src="{{asset('/images/Shop_Page.jpg')}}" alt=""><a href="#">Label <span class="">➡</span></a></div> <div class=" sofa"><img src="{{asset('/images/Home_Sofa.jpg')}}" alt=""><a href="#">Label <span class="">➡</span></a></div> </div>

提琴手

Answer 2

Hope this will work...

HTML-

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

CSS-

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