如何获取html页面上特定部分的背景色 [英] How to GET background color of a particular portion on the html page

问题描述

我使用Gradient设置html正文背景的颜色.

I used Gradient to set the color for my html body background.

CSS:

background: linear-gradient(to top,  #fb4080 10%,#ebb523 22%,#58d27c 40%,#2aff00 52%,#0fd2b7 65%,#6b6dff 80%,#ff05ea 100%);

现在，身体充满了多种颜色.使用JavaScript如何获取页面特定部分的rgb或十六进制颜色代码值?

Now body is filled with multiple colors. Using a javascript how can i get the rgb or hex color code values of a particular portion of the page?

示例:

如果我滚动页面，我想获取页面顶部的颜色. 页面(突出显示的部分内的颜色并不完全相同，而是接近它的值)，这样我就可以将该颜色代码分配/设置给页面上的其他元素，例如导航栏，菜单等

If i scroll my page, I want to get the color of the top portion of the page(the color inside the highlighted portion not exactly but values near to it) So that i can assign/set that color code to another element on my page like Navigation bar, Menu etc

有什么建议吗?

推荐答案

画布和图像对象是唯一可以读取像素值的对象.

Canvas and image objects are the only objects you can read pixel values from.

除了使用CSS渐变之外，您还可以在页面主体后面创建画布，然后将渐变呈现到画布中.之后，您可以从画布中选择一种颜色.我的答案中的问题"

Instead of using a CSS gradient you can create a canvas behind the body of your page and render the gradient into the canvas. After that you can pick a color from the canvas. A complete example is in my answer to the question "How to set an element's background as the same as a specific portion of web page".

这篇关于如何获取html页面上特定部分的背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！