Градиент в градиенте

@Андрюшатина · Регистрация: 27.11.2014

Студворк — интернет-сервис помощи студентам

Добрый день.
Гуру, помогите пожалуйста)
У меня есть див, который под углом. Фон этого дива сделан градиентом background: linear-gradient, но проблема в том, как сделать на этом же фоне background: radial-gradient.
Пример картинки во вложении.
Отдельно у меня получилось сделать, а вот как эти два градиента наложить друг на друга, как на картинке, увы не могу понять.

HTML5
1
2
<div class="back">
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.back{
height: 385px;
transform-origin: left center;
transform: skewY(-2.92deg);
 
/*этот код отвечает за основной фон*/
background: rgba(147,22,70,1);
background: -moz-linear-gradient(45deg, rgba(147,22,70,1) 0%, rgba(178,34,80,1) 25%, rgba(212,47,91,1) 50%, rgba(233,56,97,1) 75%, rgba(236,57,99,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(147,22,70,1)), color-stop(25%, rgba(178,34,80,1)), color-stop(50%, rgba(212,47,91,1)), color-stop(75%, rgba(233,56,97,1)), color-stop(100%, rgba(236,57,99,1)));
background: -webkit-linear-gradient(45deg, rgba(147,22,70,1) 0%, rgba(178,34,80,1) 25%, rgba(212,47,91,1) 50%, rgba(233,56,97,1) 75%, rgba(236,57,99,1) 100%);
background: -o-linear-gradient(45deg, rgba(147,22,70,1) 0%, rgba(178,34,80,1) 25%, rgba(212,47,91,1) 50%, rgba(233,56,97,1) 75%, rgba(236,57,99,1) 100%);
background: -ms-linear-gradient(45deg, rgba(147,22,70,1) 0%, rgba(178,34,80,1) 25%, rgba(212,47,91,1) 50%, rgba(233,56,97,1) 75%, rgba(236,57,99,1) 100%);
background: linear-gradient(25deg, rgba(147,22,70,1) 0%, rgba(178,34,80,1) 25%, rgba(212,47,91,1) 50%, rgba(233,56,97,1) 75%, rgba(236,57,99,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#931646', endColorstr='#ec3963', GradientType=1 );
 
 
/*этот код отвечает за радиальный градиент*/
background: rgba(248,246,121,1);
background: -moz-radial-gradient(center, ellipse cover, rgba(248,246,121,1) 0%, rgba(245,204,115,1) 20%, rgba(241,148,109,1) 34%, rgba(228,65,98,1) 52%, rgba(230,55,96,1) 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(248,246,121,1)), color-stop(20%, rgba(245,204,115,1)), color-stop(34%, rgba(241,148,109,1)), color-stop(52%, rgba(228,65,98,1)), color-stop(100%, rgba(230,55,96,1)));
background: -webkit-radial-gradient(center, ellipse cover, rgba(248,246,121,1) 0%, rgba(245,204,115,1) 20%, rgba(241,148,109,1) 34%, rgba(228,65,98,1) 52%, rgba(230,55,96,1) 100%);
background: -o-radial-gradient(center, ellipse cover, rgba(248,246,121,1) 0%, rgba(245,204,115,1) 20%, rgba(241,148,109,1) 34%, rgba(228,65,98,1) 52%, rgba(230,55,96,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(248,246,121,1) 0%, rgba(245,204,115,1) 20%, rgba(241,148,109,1) 34%, rgba(228,65,98,1) 52%, rgba(230,55,96,1) 100%);
background: radial-gradient(ellipse at center, rgba(248,246,121,1) 0%, rgba(245,204,115,1) 20%, rgba(241,148,109,1) 34%, rgba(228,65,98,1) 52%, rgba(230,55,96,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f679', endColorstr='#e63760', GradientType=1 );
}

@PavelNovichok · 13.01.2016, 22:30

Радиальные по своему принципу похожи на линейные градиенты, но один цвет переходит в другой не вдоль прямой линии, а словно круги по воде вокруг точки.
Радиальный градиент создаётся с помощью свойства background или background-image с параметром radial-gradient. В простейшем случае для задания радиального градиента понадобится всего два параметра: начальный и конечный цвет. По умолчанию, начальная точка располагается при этом в центре.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Градиент</title>
  <style>
   div {
    height: 100px;
    width: 100px;
    border-radius: 50px;
    background: #55ddff; /* Старые браузеры */
    background: radial-gradient(#55ddff, #0081b5);
   }
  </style>
 </head>
 <body>
  <div></div>
 </body>
</html>

@Андрюшатина · 13.01.2016, 23:24 **[ТС]**

Уже нашел к стати решение.
Тут нужно работать именно в background-image, там можно передавать сразу два параметра и по linear-gradient и по radial-gradient, а самое примечательное, что сразу же тут и можно третьим слоем задать поверх всего ещё и картинку в background-image.
Мало ли кто ещё с этим вопросом столкнется, юзайте, только стили отформатируйте под себя.

HTML5
1
2
3
4
<div class="back">
<div class="back1"></div>
<div class="back2"></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.back1{
height: 385px;
transform-origin: left center;
transform: skewY(-2.92deg);
background: #941646;
background-image: url('../img/baby3.png');
background-image: -moz-linear-gradient(45deg, #941646 0%, #b22250 25%, #d22f5a 50%, #e83760 75%, #ec3963 100%);
background-image: -webkit-gradient(left bottom, right top, color-stop(0%, #941646), color-stop(25%, #b22250), color-stop(50%, #d22f5a), color-stop(75%, #e83760), color-stop(100%, #ec3963));
background-image: -webkit-linear-gradient(45deg, #941646 0%, #b22250 25%, #d22f5a 50%, #e83760 75%, #ec3963 100%);
background-image: -o-linear-gradient(45deg, #941646 0%, #b22250 25%, #d22f5a 50%, #e83760 75%, #ec3963 100%);
background-image: -ms-linear-gradient(45deg, #941646 0%, #b22250 25%, #d22f5a 50%, #e83760 75%, #ec3963 100%);
background-image: linear-gradient(45deg, #941646 0%, #b22250 25%, #d22f5a 50%, #e83760 75%, #ec3963 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#941646', endColorstr='#ec3963', GradientType=1 );
}
.back2{
  position: absolute;
  background: url('../img/baby3.png')  57% 39.5%  no-repeat ;
   background-size: 143%;
  height: 426px;
  width: 100%;
  top: 1675px;
}

Новые блоги и статьи Все статьи Все блоги /
Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .	Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .	http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .