2016-09-07 5 views
0

Если бы странный запрос от клиента с просьбой о фоновом ищем что-то вроде этого:CSS Сумасшедшая Gradient

enter image description here

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

Я бы в идеале хотел бы избежать использования изображения, в основном, из соображений производительности

Если у кого есть какие-либо идеи, хотелось бы их услышать!

+1

Вы подумывали о возможности расслоения нескольких градиентов друг на друга? Радиаторы поверх радиальных с непрозрачностью могут сделать что-то подобное. В противном случае, в зависимости от размера вашего фона, я думаю, вам будет лучше сделать изображение. – ntgCleaner

ответ

6

body { 
 
    background: linear-gradient(to right, rgba(0,0,0,0), teal), linear-gradient(to right, rgba(255,0,100,.3), rgba(255,100,127,.2)), linear-gradient(to top right, yellow, rgba(0,0,0,0)), radial-gradient(closest-corner at 20% 80%, yellow, red); 
 
    background-attachment: fixed; 
 
}

Я пытался получить это так близко, как я мог только с помощью CSS, но цвета определенно могут использовать немного больше сочности. Удачи с клиентом!

+0

Я думаю, что это удовлетворит! Большое спасибо!! – user3727767