无法在css网格系统中将文本放置在图像上
无法在css网格系统中将文本放置在图像上
提问于 2018-01-13 06:51:40
我想要做的是将文本放在这些图像上。我希望它们在左下角，但无论我怎么尝试，似乎都不能让它们工作。我可以更改它们的大小、颜色和填充，但我不能将它们放在div中我想要的位置。任何建议都很有帮助，我非常感谢！谢谢你
HTML：
<div class="grid">
<div class="f f1">
<h3>My Beautiful Dark Fantasy</h3>
</div>
<div class="f f2">
<h3>My Beautiful Dark Fantasy</h3>
</div>
<div class="f f3">
<h3>My Beautiful Dark Fantasy</h3>
</div>
<div class="f f4">
<h3>My Beautiful Dark Fantasy</h3>
</div>
<div class="f f5">
<h3>My Beautiful Dark Fantasy</h3>
</div>
</div>CSS
html {
height: 100%;
box-sizing: border-box;
}
body {
position: relative;
margin: 0;
padding-bottom: 6rem;
min-height: 100%;
font-family: "Helvetica Neue", Arial, sans-serif;
}
.nav {
background: #ddd;
padding: 20px;
margin: 0;
}
.nav a {
padding: 10px;
}
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: 350px;
margin: 30px 150px 30px 150px;
position: relative;
}
.f {
width: 100%;
height: 100%;
position: relative;
background-repeat: no-repeat;
background-size: cover;
background-color: grey;
}
.f h3{
color: white;
margin: 0;
padding: 10px;
}
.f1 {
grid-column: 1/3;
grid-row: 1/3;
background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url("/images/album/tyler.jpg");
}
.f2 {
grid-column: 3/4;
grid-row: 1/2;
background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url("/images/album/dope.jpg");
}
.f3 {
grid-column: 3/4;
grid-row: 2/4;
background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url("/images/album/kanye.jpg");
}
.f4 {
grid-column: 1/2;
grid-row: 3/4;
background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url("/images/album/selfie.jpg");
}
.f5 {
grid-column: 2/3;
grid-row: 3/4;
background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url("/images/album/fantasy.jpg");
}
.footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
padding: 1rem;
background-color: #efefef;
text-align: center;
}回答 2
Stack Overflow用户
发布于 2018-05-09 13:35:07
一个不错的解决方案是将文本网格和图像网格堆叠在一起，方法是将文本网格和图像网格的grid-column和grid-rows设置为相同。然后只需使用z-index将文本前移。
现在，您可以轻松地将文本移动到任何位置。它也是响应式的。非常强大的方法，我们能够利用css grid的原因。使用这种方法，你可以变得非常有创意。Multi-stacking一直致力于制作一个单页面网页，你只需把你想要的页面转到页面的各个部分即可。希望这能有所帮助。
Stack Overflow用户
发布于 2018-07-01 02:17:53
具有以下html
<div class="item image-text-center">
<img src="img/2.jpg" alt="">
<div class="text">Hello, World</div>
</div>这将使文本居中
.item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.item.image-text-center .text{
color: var(--white);
padding: 10px;
position:absolute;
display: grid;
align-self: center;
justify-self: center;
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48235106
复制相关文章
相似问题