时间戳

首页 > 解决方案 > 具有半透明 100% div 和居中文本的 CSS 网格

html - 具有半透明 100% div 和居中文本的 CSS 网格

问题描述

我尝试了很多东西，但我无法让它工作。我想要创建的是带有背景图像的 7 项网格、能够在暗模式下使图像变暗的半透明叠加层以及一些在网格项中居中的文本。

我目前的版本是：

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-rows: 14vw;
  grid-gap: 0px;
}

grid-item {
  display: flex;            /* new */
  align-items: center;      /* new */
  justify-content: center;  /* new */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
</style>

<grid-container>
  <grid-item style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')"><span style="width: 100%;height: 100%; background-color:rgb(0,0,0, 0.4);"><h1 style="color: #fff;font-size: 42px;justify-self: center;
    align-self: center;">Monday</h1></span></grid-item>
  <grid-item style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')"><span style="width: 100%;height: 100%; background-color:rgb(0,0,0, 0.4);"><h1 style="color: #fff;font-size: 42px;justify-self: center;
    align-self: center;">Tuesday</h1></span></grid-item>
    <grid-item style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')"><span style="width: 100%;height: 100%; background-color:rgb(0,0,0, 0.4);"><h1 style="color: #fff;font-size: 42px;justify-self: center;
      align-self: center;">Wednesday</h1></span></grid-item>
      <grid-item style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')"><span style="width: 100%;height: 100%; background-color:rgb(0,0,0, 0.4);"><h1 style="color: #fff;font-size: 42px;justify-self: center;
        align-self: center;">Thursday</h1></span></grid-item>
        <grid-item style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')"><span style="width: 100%;height: 100%; background-color:rgb(0,0,0, 0.4);"><h1 style="color: #fff;font-size: 42px;justify-self: center;
          align-self: center;">Friday</h1></span></grid-item>
          <grid-item style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')"><span style="width: 100%;height: 100%; background-color:rgb(0,0,0, 0.4);"><h1 style="color: #fff;font-size: 42px;justify-self: center;
            align-self: center;">Saturday</h1></span></grid-item>
            <grid-item style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')"><span style="width: 100%;height: 100%; background-color:rgb(0,0,0, 0.4);"><h1 style="color: #fff;font-size: 42px;justify-self: center;
              align-self: center;">Sunday</h1></span></grid-item>
</grid-container>

但这不是我想要的——文本需要居中，所有的 in-div 中心技巧似乎都不起作用。

感谢您的解释！缩略词

// 编辑：如何让文本贴在底角和顶角？Absolut 在 Grid 中不起作用？？

在此处输入图像描述

标签： htmlcsscss-grid

解决方案

只需制作spanflex 容器即可。例如...

grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 100vh;
  grid-gap: 0px;
}

grid-item, span {
  display: flex;            /* new */
  align-items: center;      /* new */
  justify-content: center;  /* new */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
<grid-container>
  <grid-item style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')"><span style="width: 100%;height: 100%; background-color:rgb(0,0,0, 0.4);">
      <h1 style="color: #fff;font-size: 42px;justify-self: center;
    align-self: center;">Monday</h1>
    </span></grid-item>
  <grid-item style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')"><span style="width: 100%;height: 100%; background-color:rgb(0,0,0, 0.4);">
      <h1 style="color: #fff;font-size: 42px;justify-self: center;
    align-self: center;">Tuesday</h1>
    </span></grid-item>
  
</grid-container>

推荐阅读