如何在CSS初级项目中制作响应式图片文字叠加_Flex/Grid结合实践

.container {
  display: flex;
  align-items: center;           /* 垂直居中 */
  justify-content: center;       /* 水平居中 */
  height: 300px;
  position: relative;
  overflow: hidden;
}
<p>.overlay-text {
color: white;
font-size: 1.5em;
text-align: center;
z-index: 2;
background-color: rgba(0,0,0,0.5);
padding: 20px;
border-radius: 8px;
}</p><p>.background-image {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
object-fit: cover;            /<em> 图片自适应容器 </em>/
z-index: 1;
}</p>

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  padding: 20px;
}
<p>.card {
position: relative;
height: 200px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
overflow: hidden;
border-radius: 8px;
}</p><p>.card img {
width: 100%;
height: 100%;
object-fit: cover;
}</p><p>.card .text {
z-index: 2;
font-size: 1.2em;
text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}</p>

@media (max-width: 600px) {
  .overlay-text {
    font-size: 1em;
    padding: 10px;
  }
}