如何将元素的背景设置为与网页的特定部分相同 [英] How to set an element's background as the same as a specific portion of web page
问题描述
简介: 我有一个粘性的标头和一个具有线性渐变的主体.
Intro: I have a sticky header and a body which has linear gradient.
目标: 我想将标题的背景设置为与特定区域相同的背景，也就是说，标题最初位于顶部的位置.
Goal: I'd like to set the header's background as the same of a specific area, that is to say where it initially sits on the top.
尝试过的解决方案: 使用开发工具颜色选择器在顶部查找第一个值，在标题结束处查找第二个值.
Solution tried: Using the dev tool color picker to find the first value on the top and the second value where the header ends.
结果: 这可行. 这样，标题看起来像是完整的，并且是身体线性渐变的一部分. 当我向下滚动页面时，它保持背景.
Result: this works. In this way the header looks like is integrated and part of the body's linear gradient. It maintains its background as I scroll down the page.
问题: 如果页面的高度发生变化，则实际上将重新计算主体的线性渐变. 因此，现在标题的背景也需要重新计算.
Issue: If the page's height changes the body's linear gradient will be recalculated indeed. So now the header's background need a recalculation as well.
作为我的编程新手，我希望能提出任何可以帮助我动态解决此问题的建议. 猜猜这将是Java语言的帮助.
As I am new to programming I would appreciate any suggestion that can help me to solve this dynamically. Guess it's gonna be Javascript helping out.
在这里我找到了一个具有相同问题的用户.
Here I found a user with the same issue.
非常感谢您的陪伴！
推荐答案
您可以使用z-index -1和页面大小相同的画布来创建画布，而不使用CSS背景渐变.在画布中，您可以渲染渐变.这样的好处是，您可以在画布上查询特定位置的颜色，而CSS背景渐变则无法实现.这样，无论何时发生大小调整或滚动事件，您都可以更新标题的背景颜色.
Instead of using a CSS background gradient, you can create a canvas with z-index -1 and the same size of your page. In the canvas you can render your gradient. This has the advantage, that you can query the canvas for the color at a specific position, which is not possible with the CSS background gradient. By this you can update the background color of your header, whenever a resize or scroll event occurs.
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>
这篇关于如何将元素的背景设置为与网页的特定部分相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
