如何将元素的背景设置为与网页的特定部分相同答案

【问题标题】：How to set an element's background as the same as a specific portion of web page如何将元素的背景设置为与网页的特定部分相同
【发布时间】：2020-07-09 20:53:16
【问题描述】：

简介： 我有一个粘性标题和一个具有线性渐变的正文。

目标： 我想将标题的背景设置为与特定区域相同，也就是说它最初位于顶部的位置。

已尝试的解决方案： 使用开发工具颜色选择器找到顶部的第一个值和标题结束的第二个值。

结果： 这行得通。这样，标题看起来就像是集成的并且是正文线性渐变的一部分。当我向下滚动页面时，它会保持其背景。

问题： 如果页面的高度发生变化，body 的线性渐变确实会重新计算。所以现在标题的背景也需要重新计算。

由于我是编程新手，我将不胜感激任何可以帮助我动态解决此问题的建议。猜猜这会是 Javascript 的帮助。

在这里我发现了一个用户与issue相同。

非常感谢你们的时间！

【问题讨论】：

将渐变元素包裹到表头，给定高度为100%，然后给表头指定具体尺寸，隐藏溢出的内容。
你希望你的标题有一个纯色的背景颜色，它应该根据滚动位置而改变？听起来有线。

标签： javascript background-color linear-gradients

【解决方案1】：

您可以创建一个 z-index -1 且与页面大小相同的画布，而不是使用 CSS 背景渐变。在画布中，您可以渲染渐变。这样做的好处是，您可以在画布上查询特定位置的颜色，而这对于 CSS 背景渐变是不可能的。通过这种方式，您可以在发生调整大小或滚动事件时更新标题的背景颜色。

var canvas = document.getElementById ('background');
var ctx = canvas.getContext ('2d');
var header = document.getElementById ('header');

function scroll()
{
  var y = window.scrollY + header.getClientRects()[0].height;
  var rgba = ctx.getImageData (0, y, 1, 1).data;
  header.style.backgroundColor = 'rgba(' + rgba.join(',') + ')';
}

function draw()
{
  var colors = ['red', 'orange', 'yellow', 'green',
                'blue', 'indigo', 'violet'];
  var gradient = ctx.createLinearGradient (0, 0, 0, canvas.height);

  for (var i=0; i < colors.length; i++) {
    gradient.addColorStop (i/(colors.length-1), colors[i]);
  }

  ctx.fillStyle = gradient;
  ctx.fillRect (0, 0, canvas.width, canvas.height);

  scroll();
}

function resize()
{
  canvas.width = canvas.clientWidth;
  canvas.height = canvas.clientHeight;
  draw();
}

window.addEventListener('resize', resize, false);
window.addEventListener('scroll', scroll, false);

resize();

body {
  height: 100rem;
  overflow: scroll;
  margin: 0;
}

canvas {
  display: block;
  height: 100%;
  width: 100%;
  z-index: -1;
  margin: 0;
}

#header {
  position: fixed;
  top: 0;
  left: 50%;
  right: 0;
  height: 50%;
  border-bottom: 1pt solid white;
}

<body>
  <canvas id="background"></canvas>
  <div id="header">
    Header
  </div>
  <script src="gradient.js"></script>
</body>

【讨论】：