#html #css #sass #css-selectors
Вопрос:
Я хотел создать div с этим сложным градиентом в качестве фона.
Я просто хочу знать, можно ли этого достичь, используя только CSS? Было бы очень полезно, если бы вы могли привести какой-нибудь пример того, как это сделать.
Спасибо!
Комментарии:
1. Для этого может потребоваться сочетание линейного и радиального градиентов вместе, хотя, вероятно, этого будет трудно достичь. Почему бы не использовать фон изображения? Смотрите Следующее, если вы хотите сделать это с помощью CSS: developer.mozilla.org/en-US/docs/Web/CSS/gradient/… и developer.mozilla.org/en-US/docs/Web/CSS/gradient/…
2. Изображение, по-видимому, не имеет никакого базового математического шаблона, поэтому, хотя вы, вероятно, можете приблизиться, используя градиенты, если вы не сможете найти базовый шаблон, вы никогда не получите точного соответствия.
Ответ №1:
Вы можете достичь эффекта с помощью linear-gradient
:
html, body{
height:100%;
background-image: linear-gradient(to right top, #f3075c, #ed0077, #e11991, #cf30a8, #b643bd, #9860d9, #6f77ee, #288afa, #00a8ff, #00c2ff, #00d8f7, #51eceb);
}
Ответ №2:
Самое близкое, что я могу найти, — это простой угловой градиент, вы можете настроить цвета, чтобы они больше походили на настоящие
.gradient {
height: 200px;
background-image: linear-gradient(to top right, red, blue);
}
<div class="gradient"></div>