Отображение эффекта заката с градиентами над фоновым изображением в теле - PullRequest
Новая
       26

Отображение эффекта заката с градиентами над фоновым изображением в теле

0 голосов
/ 18 января 2019

Я пытаюсь создать эффект заката на основе градиента на фоне моего сайта.

Пример ссылки (с эффектом заката, на заднем плане) https://web.archive.org/web/20161017071941/https://www.embroideryaffair.com/about/

Попробуйте прокрутить вниз ссылку примера, и вы заметите эффект "заката".

Вот чего я достиг: https://sirsakisan101.provenreviews.com/

Мне удалось отобразить два изображения ладони, используя следующий код. 

body {
background-image: url(https://sirsakisan101.provenreviews.com/wp-content/uploads/2019/01/left.png), url(https://sirsakisan101.provenreviews.com/wp-content/uploads/2019/01/right.png), url(https://sirsakisan101.provenreviews.com/wp-content/uploads/2019/01/sunsetbgbottom.png);
background-repeat: no-repeat, no-repeat, repeat-x;
background-attachment: fixed, fixed;
background-position: left top, right top, bottom;
}

Теперь я пытаюсь использовать следующий код (упомянутый ниже) для достижения эффекта заката на моих фоновых изображениях, но он не работает. Я также попытался удалить элемент «before» и добавить фоновые изображения вместе с градиентами, но затем он появляется над фоновыми изображениями. 

body:before {
background: linear-gradient(bottom, rgb(255,203,112) 0%, rgb(107,138,169) 30%, rgb(1,44,87) 100%);
background: -o-linear-gradient(bottom, rgb(255,203,112) 0%, rgb(107,138,169) 30%, rgb(1,44,87) 100%);
background: -moz-linear-gradient(bottom, rgb(255,203,112) 0%, rgb(107,138,169) 30%, rgb(1,44,87) 100%);
background: -webkit-linear-gradient(bottom, rgb(255,203,112) 0%, rgb(107,138,169) 30%, rgb(1,44,87) 100%);
background: -ms-linear-gradient(bottom, rgb(255,203,112) 0%, rgb(107,138,169) 30%, rgb(1,44,87) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#012c57', endColorstr='#ffcb70');
background: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(255,203,112)), color-stop(0.3, rgb(107,138,169)), color-stop(1, rgb(205,217,230)) ) !important;
}

Я хочу отобразить этот код за фоновыми изображениями, чтобы добиться эффекта заката на примере веб-сайта. Я не могу понять, почему это не работает. Буду благодарен за любую помощь.

Спасибо.

Ответы [ 2 ]

0 голосов
/ 18 января 2019

Вы можете напрямую добавить градиент к другим фоновым изображениям (поскольку свойство градиента считается фоновым изображением) следующим образом: 

body {
background-image: url(https://sirsakisan101.provenreviews.com/wp-content/uploads/2019/01/left.png),
url(https://sirsakisan101.provenreviews.com/wp-content/uploads/2019/01/right.png),
url(https://sirsakisan101.provenreviews.com/wp-content/uploads/2019/01/sunsetbgbottom.png),
-webkit-linear-gradient(bottom, rgb(255,203,112) 0%, rgb(107,138,169) 30%, rgb(1,44,87) 100%);
}

Это сработало для меня, и гораздо проще добавить дополнительные элементы;)

0 голосов
/ 18 января 2019

Вы можете сделать это с другим html-элементом внутри одного фонового изображения. 

<div> // has your background image
  <div class="gradient"> // will have the gradiant style
  </div>
</div>

CSS 

.gradient {
  background: linear-gradient( rgba(255,255,255,0.23) 0%, rgba(164,49,34, .85) 100%);
}

Вот пример скрипка

  • Обратите внимание, я просто упростил градиент CSS. Сохраняйте свой стиль.

Подумайте, как вы используете тег body, как вы это делаете в настоящее время. Вы должны убедиться, что div внутри (с градиентом) расположен непосредственно над другим div. Может быть, вы должны сделать что-то вроде 

.parent {
  // The element with the image
  position: relative;
}

.child {
  // the element with the gradient
  position absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
...