1

Подскажите пожалуйста, как реализовать такой градиент? Не могу разобраться так как это 2 картинки в одном блоке..


Я решил этот вопрос используя псевдоэлементы.

1
  • background-image: linear-gradient(to right, transparent 0%, rgba(255,255,255,1) 50%, transparent 100%);
    – MoloF
    Commented 25 апр. 2019 в 17:48

2 ответа 2

3

body {

   background-image: 
       linear-gradient(to right, transparent, white, transparent),
       url(https://i.imgur.com/Lzvw7g8.jpg),
       url(https://i.imgur.com/V09WrPA.jpg);

   background-position: 
       0 0, 
       /* 600 - половина ширины картинки */
       calc(50vw - 600px) calc(50vh + 50%), 
       50vw calc(50vh + 50%);

   background-repeat: 
       repeat, 
       no-repeat, 
       no-repeat;
}

1

В твоём примере может быть не градиент, например text-shadow. Если использовать градиент, то вот пример для тебя:

background: linear-gradient(to right, #1e5799 0%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 75%, #1e5799 100%);

Пояснения: linear-gradient - линейный градиент.

to right - от начала (левой части) в правую сторону.

#1e5799 0% - цвет от 0% начинается и ограничивается следующим.

Ваш ответ

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

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