我需要在-6ren">
gpt4 book ai didi

html - 响应式方形网格上的透明叠加

转载 作者:太空宇宙 更新时间:2023-11-04 07:44:47 25 4
gpt4 key购买 nike

我正在尝试制作响应式方形图像网格,每个网格由 9 张图像组成。

我只是使用简单的 bootstrap 网格布局来制作网格 -

div class="col-md-4">
<img class="home_images" src="#image*" style="height:25%; width:27%">
<!--Nine more images like this-->
</div>

我需要在每个正方形网格的顶部(绝对定位)添加一个叠加的灰色低不透明度正方形,以在每个网格的中心添加 h2 文本。由于网格没有特定高度,我该如何继续使用它?

enter image description here

最佳答案

你是说这样?

<!DOCTYPE HTML>

<html>

<head>
<style>
body {
height: 100%;
display: flex;
justify-content: center;
}

.grid {
width: 80%;
height: 100%;
border: 1px solid red;
position: relative;
}

.row {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
}

.item {
width: 30%;
height: 100px;
border: 1px solid blue;
}

.grid:after {
content: "Heading Two Title"; /*allow to show up*/
width: 100%;
height: 100%; /*cover grid area*/
position: absolute;
top: 0;
left: 0; /*make it stay on the grid*/
background-color: #a0a0a0; /*instead of opacity choose a light gray color*/
z-index: -1; /*place behind so as not to cover the grid elements*/
display: flex;
justify-content: center;
align-items: center;
font-size: 3em; /*make as big as needed*/
}
</style>
</head>

<body>
<div class="grid">
<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

<div class="row">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div><!-- /grid -->
</body>

</html>

关于html - 响应式方形网格上的透明叠加,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48241692/

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