Отзывчивый LESS / CSS линейный градиентный фон

0

Поскольку я нахожу, что это создает проблемы с созданием статических изображений, например примерами ниже, которые реагируют и охватывают разные разрешения и высоты/ширины, я думал, используя градиенты цвета CSS3, чтобы воспроизвести один и тот же фон и сделать его динамическим.

Я хотел бы указать любой вклад в инструменты/подсказки и трюки/и т.д. О том, как воссоздать такой фон с помощью CSS. Я просмотрел онлайн-инструменты для создания правил CSS, например http://www.css3factory.com/linear-gradients, но они не создают четкой линии между двумя цветами, например, в моем примере.

Изображение 174551

  • 0
    Я посмотрел на различные онлайн-инструменты для создания правил CSS, основанных на разных параметрах, но ни один из них не заставил меня воссоздать тот же фон, что и здесь.
Теги:
linear-gradients

1 ответ

1
Лучший ответ

попробуйте установить 2 линейных градиента сверху друг друга, сначала с rgba() с непрозрачностью до нескольких% (или hsla()), а второй с непрозрачностью 100%. примерно так:

background:
    linear-gradient(
    130deg ,
    rgba(171, 17, 51, 1) 30%,
      rgba(255, 51, 102, 0.75)  
    ),
    linear-gradient(
    200deg ,
    #AB1133 50%,
      #FF3366 50%
    )
    ;

DEMO настройте его на свои нужды

Поделиться
  • 0
    Есть ли причины для использования цветов hex, а не rgba / hsla во втором линейном градиенте?
  • 0
    это не должно было быть прозрачным :) это должно было прояснить суть на самом деле
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню