在 Body 中显示具有渐变效果的背景图像上方的日落效果

Question

我正在尝试在我的网站背景上创建基于渐变的日落效果。

示例Link（具有日落效果，在背景中）https://web.archive.org/web/20161017071941/https://www.embroideryaffair.com/about/

尝试向下滚动示例 link，您会注意到 "sunset" 效果。

这是我到目前为止所取得的成就：https://sirsakisan101.provenreviews.com/

我能够使用以下代码显示两个手掌图像 side-by-side。

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;
}

我想在我的背景图片后面显示这段代码，以实现示例网站的日落效果。我不明白为什么它不起作用。我将不胜感激任何帮助。

谢谢。

Answer 1

您可以在背景图片中使用另一个 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%);
}

这是一个例子fiddle

注意我只是简化了渐变 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;
}

Answer 2

您可以直接将渐变添加到其他背景图像（因为渐变属性被视为背景图像），如下所示：

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%);
}

这对我有用，而且比添加其他元素容易得多；)

在 Body 中显示具有渐变效果的背景图像上方的日落效果

Display Sunset Effect with Gradients Above Background Image in Body

css

wordpress

gradient

background-image