Question

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

示例链接（在背景中具有日落效果）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;
}

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

谢谢。

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

这对我有用，添加其他元素要容易得多；）

在体内背景图像上方显示渐变的日落效果

2 个答案: