CSS градиентное направление только для одного раздела

Question

У меня есть градиент CSS, который выглядит следующим образом

И код, который я использовал для этого, выглядит следующим образом

background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(243,249,252,1) 0%, rgba(243,249,252,1) 50%, rgba(231,244,249,1) 50%, rgba(255,255,255,1) 100%);

Как видите, левые 50% состоят из одного цвета, а правые 50% имеют градиент слева направо. Я хочу, чтобы этот правильный градиент перетекал снизу вверх. Как я могу это сделать?

Answer 1

Вам нужно рассмотреть несколько фоновых слоев, где верхний слой (один цветной слой) занимает только 50% ширины и размещает его слева:

html {
 height:100%;
 background: 
   linear-gradient(rgba(243,249,252,1),rgba(243,249,252,1)) left/50% 100%,
   linear-gradient(to top, rgba(231,244,249,1), rgba(255,255,255,1) );
 background-repeat:no-repeat;
}

Answer 2

для этого вы должны использовать псевдо-селектор для этого типа требований, он прекрасно работает для вас. в соответствии с вашими требованиями, вы не можете использовать вертикальный градиент, и первые 50% ширины - это нормальный цвет, для этого мы применяем градиент ко всей ширине вашей страницы, а затем покрываем левую 50% ширину, используя псевдоселектор :before, чтобы получить большепонимание следует за кодом фрагмента.

.bg_container {
  position: relative;
  background: rgb(2,0,36);
  background: linear-gradient(0deg, rgba(231,244,249,1) 0%, rgba(255,255,255,1) 100%);
}
.bg_container:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 50%;
  background: rgba(243,249,252,1);
  z-index: 0;
  content: "";
}
.page_content{
  position: relative;
}

<div class="bg_container" style="height: 400px;">
  <div class="page_content">
    hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii
  </div>
</div>

применить высоту к элементу div можно только в зависимости от содержимого вашей страницы.

Надеюсь, этот код полезен для вас.

Спасибо ...

Answer 3

Я испробовал 2 метода, которые вам больше всего подходят.

#grad1 {
  background: linear-gradient(90deg, red 50%, transparent 50%), linear-gradient(0deg, red 30%, blue 70%);
  position: relative;
  z-index: 0;
  padding: 15px;
}


/*********************/

#grad2 {
  position: relative;
  z-index: 0;
  padding: 15px;
}

p {
  color: white;
}

#grad2:before {
  content: "";
  background: linear-gradient(0deg, red 30%, blue 70%);
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  z-index: -1;
}

#grad2:after {
  content: "";
  background: linear-gradient(90deg, red 30%, green 70%);
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  z-index: -1;
}

<div id="grad1">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

<br>
<br>

<div id="grad2">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
    has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
    publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

Спасибо!

Answer 4

По умолчанию градиенты применяются сверху вниз, в вашем классе вы приписали поворот на 90 градусов градиенту, который, изменяя степень до 180, приводит к градиенту снизу вверх.

background: rgb(2,0,36);
background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(243,249,252,1) 0%, rgba(243,249,252,1) 50%, rgba(231,244,249,1) 50%, rgba(255,255,255,1) 100%);

См. Здесь для получения дополнительной информации