#css #radial-gradients
#css #радиальные градиенты
Вопрос:
Я использовал следующий код в своем файле css, чтобы получить градиент во всех углах, однако я получаю градиент только в двух верхних углах.
Может кто-нибудь, пожалуйста, дайте мне знать, как правильно это сделать?
jsFiddle: https://jsfiddle.net/z0hxmb9j/1 /
body{
width: 100%;
background-color: #fbe0be;
}
body:before {
z-index: -1;
content: '';
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
display: block;
width: 100%;
border-radius: 0%;
background-image:
radial-gradient(circle at top left,
rgba(212,235,235,1), rgba(155,179,208,.3) 70.71%),
radial-gradient(circle at top right,
rgba(83,98,127,1), rgba(155,179,208,.3) 70.71%),
radial-gradient(circle at bottom right,
rgba(122,97,70,1), rgba(251,224,190,.7) 70.71%),
radial-gradient(circle at bottom left,
rgba(122,97,70,1), rgba(251,224,190,.7) 70.71%)
}
Комментарии:
1. учитывая тот факт, что все они находятся друг над другом, последний будет едва заметен из-за 3 сверху, даже если вы используете полупрозрачный цвет
2. ОК. Итак, увеличьте прозрачность сверху вниз.
3. нет, вам нужно уменьшить один из верхних. Вот иллюстрация вашего градиента сплошным цветом: jsfiddle.net/g0jw43st … в самом нижнем из них есть только небольшая секция