Всем привет. Есть такая вёрстка портфолио на гридах. Каждому блоку задан градиент - бэкграундом. Подскажите пожалуйста, как проще сверстать так, что бы картинка выравнивалась по центру блока и была возможность менять её положение (выше/ниже). А блок с заголовками и описанием везде был с одинаковым отступом слева и справа. Код стесняюсь сюда вставлять, т.к. сейчас там полный хаос и кажется, что это только усложнит задачу :)
1 ответ
картинку делать фоном. как-то так
.oneblock {
width: 300px;
height: 500px;
position: relative;
border-radius: 10px;
position: relative;
display: flex;
align-items: flex-end;
overflow: hidden;
position: relative;
z-index: 1
}
.image {
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2
}
.text {
padding: 15px;
width: 100%;
box-sizing: border-box;
position: relative;
z-index: 4;
font-size: 30px;
color: white;
}
.oneblock:before {
content: '';
background: radial-gradient(circle, rgba(82,73,235,1) 0%, rgba(165,165,255,1) 50%, rgba(6,192,230,1) 100%);
z-index: 1;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}
.oneblock:after {
content: '';
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #0F358E);
height: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: 3;
width: 100%
}
<div class="oneblock">
<div class="image" style="background-image: url(https://upload.wikimedia.org/wikipedia/en/a/a9/MarioNSMBUDeluxe.png)"></div>
<div class="text">Любой текст</div>
</div>
-
Благодарю. А если фоном блока .oneblock указан градиент (как в моём случае)? 11 апр 2021 в 17:38
-
отредактировал. так ? Первый слой - градиент, второй слой - изображение, третий слой - градиент под текст внизу, четвертый слой - текст.– Crus11 апр 2021 в 17:47
-
теперь да. благодарю. может быть подскажете ещё по одному моменту: в данном примере картинка растягивается на всю ширину блока, а если я хочу сделать отступы у картинки или уменьшить её, но сохранить её положение по центру блока? 11 апр 2021 в 18:38
-
играйте с background-position и background-size у .image. можете добавить доп классы, и задавать разные эти параметры - так на разных блочках сделаете разные стили. Если Вам помог мой ответ - буду благодарен если пометите его правильным. :)– Crus11 апр 2021 в 18:41
-