gpt4 book ai didi

css - 使用 CSS 网格,将文本覆盖在图像上

转载 作者:行者123 更新时间:2023-12-04 13:14:12 25 4
gpt4 key购买 nike

嘿嘿,

我正在尝试使用 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>

最佳答案

网格不是继承的,所以你不能在网格上放置非网格元素。您的标题不是网格元素,只有文章才是。

让每篇文章都有自己的网格,然后从那里分层。

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>

关于css - 使用 CSS 网格,将文本覆盖在图像上,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62029996/

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