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

Question

I tried so many thing, but I cannot get it to work. What I want to create is 7 item grid with a background image, a semi-transparent overlay to be able to darken the image in dark mode as well as some text that is centered in the grid-item.

My current version is:

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>

But it just is not what I wanted - the text needs to be centered and all in-div center tricks did not seem to have worked.

Grateful for an explanation! fj

Answer 1

Just make the span flex containers as well. For instance...

 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>