Блог

Я столько всего перепробовал, но не могу заставить это работать. То, что я хочу создать,-это сетка из 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; } lt;/stylegt;  lt;grid-containergt;  lt;grid-item style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')"gt;lt;span style="width: 100%;height: 100%; background-color:rgb(0,0,0, 0.4);"gt;lt;h1 style="color: #fff;font-size: 42px;justify-self: center;  align-self: center;"gt;Mondaylt;/h1gt;lt;/spangt;lt;/grid-itemgt;  lt;grid-item style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')"gt;lt;span style="width: 100%;height: 100%; background-color:rgb(0,0,0, 0.4);"gt;lt;h1 style="color: #fff;font-size: 42px;justify-self: center;  align-self: center;"gt;Tuesdaylt;/h1gt;lt;/spangt;lt;/grid-itemgt;  lt;grid-item style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')"gt;lt;span style="width: 100%;height: 100%; background-color:rgb(0,0,0, 0.4);"gt;lt;h1 style="color: #fff;font-size: 42px;justify-self: center;  align-self: center;"gt;Wednesdaylt;/h1gt;lt;/spangt;lt;/grid-itemgt;  lt;grid-item style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')"gt;lt;span style="width: 100%;height: 100%; background-color:rgb(0,0,0, 0.4);"gt;lt;h1 style="color: #fff;font-size: 42px;justify-self: center;  align-self: center;"gt;Thursdaylt;/h1gt;lt;/spangt;lt;/grid-itemgt;  lt;grid-item style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')"gt;lt;span style="width: 100%;height: 100%; background-color:rgb(0,0,0, 0.4);"gt;lt;h1 style="color: #fff;font-size: 42px;justify-self: center;  align-self: center;"gt;Fridaylt;/h1gt;lt;/spangt;lt;/grid-itemgt;  lt;grid-item style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')"gt;lt;span style="width: 100%;height: 100%; background-color:rgb(0,0,0, 0.4);"gt;lt;h1 style="color: #fff;font-size: 42px;justify-self: center;  align-self: center;"gt;Saturdaylt;/h1gt;lt;/spangt;lt;/grid-itemgt;  lt;grid-item style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')"gt;lt;span style="width: 100%;height: 100%; background-color:rgb(0,0,0, 0.4);"gt;lt;h1 style="color: #fff;font-size: 42px;justify-self: center;  align-self: center;"gt;Sundaylt;/h1gt;lt;/spangt;lt;/grid-itemgt; lt;/grid-containergt;  

Но это просто не то, что я хотел — текст должен быть центрирован, и все трюки с центром в div, похоже, не сработали.

Благодарен за объяснение! fj

// РЕДАКТИРОВАТЬ: Как бы я заставил текст прилипать к нижнему и верхнему углам? Абсолют не работает в сетке??

Просто сделайте также span гибкие контейнеры. Например…

 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; } 

 lt;grid-containergt;  lt;grid-item style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')"gt;lt;span style="width: 100%;height: 100%; background-color:rgb(0,0,0, 0.4);"gt;  lt;h1 style="color: #fff;font-size: 42px;justify-self: center;  align-self: center;"gt;Mondaylt;/h1gt;  lt;/spangt;lt;/grid-itemgt;  lt;grid-item style="background-image: url('https://media.istockphoto.com/photos/delicious-homemade-hamburger-and-french-fries-picture-id1254672762')"gt;lt;span style="width: 100%;height: 100%; background-color:rgb(0,0,0, 0.4);"gt;  lt;h1 style="color: #fff;font-size: 42px;justify-self: center;  align-self: center;"gt;Tuesdaylt;/h1gt;  lt;/spangt;lt;/grid-itemgt;   lt;/grid-containergt;