具有半透明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>

但這不是我想要的 - 文本需要居中，并且所有 div 中心技巧似乎都沒有奏效。

感謝您的解釋！縮略詞

uj5u.com熱心網友回復：

也只需制作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>

標籤：html css css网格

上一篇：如何在同一行中對齊兩個標題？

下一篇：CSS：懸停在元素的子元素上應該影響不同的元素