使用CSS网格，在图像上覆盖文本

Question

Heyo，

我正在尝试使用CSS网格，以在网格中的图像上叠加文本。基本上我想将captions放在图像上。但是，这不起作用。我尝试过在网上搜索，主要的答案是关于职位的：但这似乎也不起作用。

在摘要中，我使用背景色而不是图像。我希望全文遍历这些图像。

img {
    width: 100%;
}

li {
    list-style: none;
    display: inline;
    text-decoration: none;
}

ol li {
    list-style-type: upper-roman;
}

a {
    text-decoration: none;
    color: black;
}

hr {
    margin-top: 10px;
    border-top: 1px solid black;
    width: 100%;
}

#about-me {
    font-weight: 700;
}

.tags {
    padding: 15px 0 15px 0;
    color: blue;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}


.case-img {
    width: 100%;
    background-size: cover;
    transition: 0.5s;
}

.case-img:hover {
filter: brightness(0.2);
}

#case-img-1 {
    background-image: url("img/save-topia.png");
    height: 40vh;
    background-color: red;
}

#case-img-2 {
    background-image: url("img/prototype.jpg");
    height: 40vh;
  background-color: blue;
}

#case-img-3 {
    background-image: url("img/great-lakes-algae-blooms.jpg");
    height: 40vh;
  background-color: green;
}
    
.case-container {
        display: grid;
        grid-template-columns: repeat (5, 20%);
        grid-template-rows: repeat (5, 20%);
        column-gap: 10px;
    }

    #case-1 { 
        grid-column: 1 / 4;
        grid-row: 1 / 6;
    }

    #case-2 { 
        grid-column: 4 / 6;
        grid-row: 1 / 3;
    }

    #case-3 { 
        grid-column: 4 / 6;
        grid-row: 3 / 6;
    }

    #caption-1 {
        grid-column: 1 / 4;
        grid-row: 1 / 6;
    }

    #caption-2 { 
        grid-column: 4 / 6;
        grid-row: 1 / 3;
    }

    #caption-3 { 
        grid-column: 4 / 6;
        grid-row: 3 / 6;
    }

<section class="case-container">
            <article id="case-1">
                <a href="save-topia.html"><div id="case-img-1" class="case-img"></div></a>
                <div id="caption-1" class="case-caption">
                    <h2>Saving App</h2>
                    <p>How might I be able to use behavioural economics and psychology to influence saving behaviour? </p>
                    <p class="tags">#UXResearch #UIDesign</p>
                </div>
            </article>
            <article id="case-2">
                <a href="drinking-buddy.html"><div id="case-img-2" class="case-img"></div></a>
                <div id="caption-2" class="case-caption">
                    <h2>Drinking Buddy</h2>
                    <p>Drinking buddy is a smart mug, with two major functions. It will make sure the barman will put enough alcohol in your mug and also prevent roofying. </p>
                    <p class="tags">#Arduino #RapidPrototyping</p>
                </div>
            </article>
            <article id="case-3">
                <a href=""><div id="case-img-3" class="case-img"></div></a>
                <div id="caption-3" class="case-caption">
                    <h2>GIS Remote Sensing</h2>
                    <p>Using satellite data for remote sensing GIS interface</p>
                    <p class="tags">#BigData #UXResearch #UIDesign</p>
                </div>
            </article>
        </section>

Answer 1

网格不是继承的，因此您不能在网格上放置非网格元素。您的标题不是仅文章的网格元素。

使每个文章都有自己的网格，然后从那里分层。

a {
  text-decoration: none;
  color: black;
}

.tags {
  padding: 15px 0 15px 0;
  color: blue;
}

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.case-img {
  width: 100%;
  background-size: cover;
  transition: 0.5s;
}

#case-img-1 {
  height: 60vh;
  background-color: red;
}

#case-img-2 {
  height: 60vh;
  background-color: blue;
}

#case-img-3 {
  height: 90vh;
  background-color: green;
}

.case-container {
  display: grid;
  grid-template-columns: repeat (5, 20%);
  grid-template-rows: repeat (5, 20%);
  column-gap: 10px;
}

#case-1 {
  grid-column: 1 / 4;
  grid-row: 1 / 6;
}

#case-2 {
  grid-column: 4 / 6;
  grid-row: 1 / 3;
}

#case-3 {
  grid-column: 4 / 6;
  grid-row: 3 / 6;
}

article {
  display: grid;
  grid-template-columns: 1fr;
}

article a,
.case-caption {
  grid-row: 1;
  grid-column: 1
}

<section class="case-container">
  <article id="case-1">
    <a href="save-topia.html">
      <div id="case-img-1" class="case-img"></div>
    </a>
    <div id="caption-1" class="case-caption">
      <h2>Saving App</h2>
      <p>How might I be able to use behavioural economics and psychology to influence saving behaviour? </p>
      <p class="tags">#UXResearch #UIDesign</p>
    </div>
  </article>
  <article id="case-2">
    <a href="drinking-buddy.html">
      <div id="case-img-2" class="case-img"></div>
    </a>
    <div id="caption-2" class="case-caption">
      <h2>Drinking Buddy</h2>
      <p>Drinking buddy is a smart mug, with two major functions. It will make sure the barman will put enough alcohol in your mug and also prevent roofying. </p>
      <p class="tags">#Arduino #RapidPrototyping</p>
    </div>
  </article>
  <article id="case-3">
    <a href="">
      <div id="case-img-3" class="case-img"></div>
    </a>
    <div id="caption-3" class="case-caption">
      <h2>GIS Remote Sensing</h2>
      <p>Using satellite data for remote sensing GIS interface</p>
      <p class="tags">#BigData #UXResearch #UIDesign</p>
    </div>
  </article>
</section>

Answer 2

您需要将标题放置在包含图像的div内，如果要专门使用grid，则@Paulie_D的答案很合适。

img {
    width: 100%;
}

li {
    list-style: none;
    display: inline;
    text-decoration: none;
}

ol li {
    list-style-type: upper-roman;
}

a {
    text-decoration: none;
    color: black;
}

hr {
    margin-top: 10px;
    border-top: 1px solid black;
    width: 100%;
}

#about-me {
    font-weight: 700;
}

.tags {
    padding: 15px 0 15px 0;
    color: blue;
}

.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}


.case-img {
    width: 100%;
    background-size: cover;
    transition: 0.5s;
    
}

.case-img:hover {
filter: brightness(0.2);
}

#case-img-1 {
    background-image: url("img/save-topia.png");
    height: 40vh;
    background-color: red;
}

#case-img-2 {
    background-image: url("https://images.all-free-download.com/images/graphicthumb/goa_small_bird_202958.jpg");      /*MODIFIED IMAGE LINK*/
    height: 40vh;
  background-color: blue;
}

#case-img-3 {
    background-image: url("img/great-lakes-algae-blooms.jpg");
    height: 40vh;
  background-color: green;
}
    
.case-container {
        display: grid;
        grid-template-columns: repeat (5, 20%);
        grid-template-rows: repeat (5, 20%);
        column-gap: 10px;
    }

    #case-1 { 
        grid-column: 1 / 4;
        grid-row: 1 / 6;
    }

    #case-2 { 
        grid-column: 4 / 6;
        grid-row: 1 / 3;
    }

    #case-3 { 
        grid-column: 4 / 6;
        grid-row: 3 / 6;
    }

    #caption-1 {
        grid-column: 1 / 4;
        grid-row: 1 / 6;
    }

    #caption-2 { 
        grid-column: 4 / 6;
        grid-row: 1 / 3;
    }

    #caption-3 { 
        grid-column: 4 / 6;
        grid-row: 3 / 6;
    }

<section class="case-container">
            <article id="case-1">
                <a href="save-topia.html"><div id="case-img-1" class="case-img">
                
                  <div id="caption-1" class="case-caption">
                      <h2>Saving App</h2>
                      <p>How might I be able to use behavioural economics and psychology to influence saving behaviour? </p>
                      <p class="tags">#UXResearch #UIDesign</p>
                  </div>
                
                </div></a>
                
            </article>
            <article id="case-2">
                <a href="drinking-buddy.html"><div id="case-img-2" class="case-img">
                
                  <div id="caption-2" class="case-caption">
                      <h2>Drinking Buddy</h2>
                      <p>Drinking buddy is a smart mug, with two major functions. It will make sure the barman will put enough alcohol in your mug and also prevent roofying. </p>
                      <p class="tags">#Arduino #RapidPrototyping</p>
                  </div>
                
                </div></a>
                
            </article>
            <article id="case-3">
                <a href=""><div id="case-img-3" class="case-img">
                
                  <div id="caption-3" class="case-caption">
                      <h2>GIS Remote Sensing</h2>
                      <p>Using satellite data for remote sensing GIS interface</p>
                      <p class="tags">#BigData #UXResearch #UIDesign</p>
                  </div>
                
                </div></a>
                
            </article>
        </section>