我需要解决我的问题(如果有的话):
我想检查 div 后面的背景图像的颜色值(在我的例子中是 .picturecenter),如果背景值是暗的,则将颜色从黑色更改为白色。
这可能吗?
这是我的网站:http://myhrmans.com/hulebild2/ (文字“欢迎”是目标) 我看过https://github.com/kennethcachia/Background-Check/已经并且还没有让它工作。
感谢您的帮助!
最佳答案
您可以使用 Canvas 元素读取像素。在这里检查功能。
[通过javascript获取图像的平均颜色
您将不得不处理图像元素,而不是具有图像背景的 div 元素。但是你可以从后台解析出图片src
var bg = $('.picturecenter').css('background-image')
然后只需在左右括号上做一些子字符串即可获取 url。然后获取原始 javascript img 元素。
var imgElement = document.createElement('img');
imgElement.src = bg;
并调用上面链接中的方法。
var colors = getAverageRGB(imgElement);
然后您可以将这些颜色平均在一起,看看它是否足够暗。像
var avg = (colors.r + colors.g + colors.b) / 3;
if (avg < 100)
$('.textcenter').css('color', '#EEE')
else
$('.textcenter').css('color', '#333')
关于javascript - 根据背景图像更改文本颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21269143/