0

пример

Всем привет. Есть такая вёрстка портфолио на гридах. Каждому блоку задан градиент - бэкграундом. Подскажите пожалуйста, как проще сверстать так, что бы картинка выравнивалась по центру блока и была возможность менять её положение (выше/ниже). А блок с заголовками и описанием везде был с одинаковым отступом слева и справа. Код стесняюсь сюда вставлять, т.к. сейчас там полный хаос и кажется, что это только усложнит задачу :)

1 ответ 1

0

картинку делать фоном. как-то так

.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>

5
  • Благодарю. А если фоном блока .oneblock указан градиент (как в моём случае)?
    – vizualika
    11 апр 2021 в 17:38
  • отредактировал. так ? Первый слой - градиент, второй слой - изображение, третий слой - градиент под текст внизу, четвертый слой - текст.
    – Crus
    11 апр 2021 в 17:47
  • теперь да. благодарю. может быть подскажете ещё по одному моменту: в данном примере картинка растягивается на всю ширину блока, а если я хочу сделать отступы у картинки или уменьшить её, но сохранить её положение по центру блока?
    – vizualika
    11 апр 2021 в 18:38
  • играйте с background-position и background-size у .image. можете добавить доп классы, и задавать разные эти параметры - так на разных блочках сделаете разные стили. Если Вам помог мой ответ - буду благодарен если пометите его правильным. :)
    – Crus
    11 апр 2021 в 18:41
  • Огромное спасибо. Теперь всё получилось как хотел.
    – vizualika
    11 апр 2021 в 19:27

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.