За пример ще използвам блок „Обложка“ от новия редактор на WordPress (известен като Гутенберг), който представлява картинка, върху която има текст и/или друго съдържание. Такъв блок може да играе ролята на рекламен банер или заглавие на секция.
Това е обложка
И в нея можем да поставим много текст. Например можем да добавим още едно изречение, което не казва нищо. Обаче не е достатъчно, така че ще добавим и още и още.
В момента Гутенберг поставя изображението като фон на блока и му дава минимална височина. Обаче така пропорциите на блока нямат връзка с пропорциите на изображението и е трудно да го направите винаги да е да кажем квадратен или в пропорция 4 към 3. Освен това поставяйки изображението като фон в атрибут style, губим възможността да се се възползваме от отзивчивите изображения и ще караме потребителя да зарежда едно и също (голямо) изображение независимо от размера на екрана му.
<div class="wp-block-cover has-very-dark-gray-background-color has-background-dim" style="background-image:url(https://greatgonzo.net/wp-content/uploads/2019/08/Foggy_Forest_by_Jake_Stewart.jpg)">
<div class="wp-block-cover__inner-container">
<p style="text-align:center" class="has-huge-font-size">Това е обложка</p>
<p style="text-align:center">И в нея можем да поставим много текст. Например можем да добавим още едно изречение, което не казва нищо. Обаче не е достатъчно, така че ще добавим и още и още.
<div class="wp-block-button aligncenter">
<a class="wp-block-button__link" href="#">Цъкнете тук!</a>
</div>
</div>
</div>За да постигнем желания ефект, ще поставим изображението като елемент img и ще разположим съдържанието върху него. Сигурно първото, което ви хрумва е да използвате абсолютно позициониране, но това не е добър вариант, защото тогава съдържанието няма да разпъва блока. Как иначе да сложим два елемента един връз друг? Със CSS Grid естествено. CSS Grid ни позволява да поставим повече от един елемент в дадена клетка на решетката и ние ще се възползваме от тази възможност:
<div class="wp-block-cover has-very-dark-gray-background-color has-background-dim uses-css-grid">
<img src="https://greatgonzo.net/wp-content/uploads/2019/08/Foggy_Forest_by_Jake_Stewart-1024x684.jpg" aria-hidden="true" class="wp-image-2499" srcset="https://greatgonzo.net/wp-content/uploads/2019/08/Foggy_Forest_by_Jake_Stewart-1024x684.jpg 1024w, https://greatgonzo.net/wp-content/uploads/2019/08/Foggy_Forest_by_Jake_Stewart-300x200.jpg 300w, https://greatgonzo.net/wp-content/uploads/2019/08/Foggy_Forest_by_Jake_Stewart-768x513.jpg 768w" sizes="(max-width: 1024px) 100vw, 1024px">
<div class="wp-block-cover__inner-container">
<p style="text-align:center" class="has-huge-font-size">Това е обложка</p>
<p style="text-align:center">И в нея можем да поставим много текст. Например можем да добавим още едно изречение, което не казва нищо. Обаче не е достатъчно, така че ще добавим и още и още.
<div class="wp-block-button aligncenter">
<a class="wp-block-button__link" href="#">Цъкнете тук!</a>
</div>
</div>
</div>.wp-block-cover.uses-css-grid > * {
grid-column: 1;
grid-row: 1;
min-width: 100%;
min-height: 100%;
}
.wp-block-cover.uses-css-grid > img {
border: none !important;
object-fit: cover;
}
.wp-block-cover.uses-css-grid .wp-block-cover__inner-container {
display: flex;
flex-direction: column;
justify-content: center;
padding: 3em;
box-sizing: border-box;
}
Горният CSS освен, че поставя картинката и текстовото съдържание в единствената клетка от решетката, дефинирана върху блока, се грижи текстовото съдържание да е центрирано вертикално в блока, и картинката винаги да го запълва. Ето и крайния резултат:
Това е обложка
И в нея можем да поставим много текст. Например можем да добавим още едно изречение, което не казва нищо. Обаче не е достатъчно, така че ще добавим и още и още.
Ето го още веднъж, но този път с увеличен шрифт, за да демонстрирам как съдържанието също разпъва блока:
Това е обложка
И в нея можем да поставим много текст. Например можем да добавим още едно изречение, което не казва нищо. Обаче не е достатъчно, така че ще добавим и още и още.