js提取图片主体色设置为盒子的背景色

此处用到了jquery.adaptive-backgrounds.js插件1.问题因为产品提出需求要将头像的主体色设置为父元素背景色所以找到了好用的jquery.adaptive-backgrounds插件2.解决方法引入jQuery.js和jquery.adaptive-backgrounds.js引入文件之后,按照下面这样即可完成一个简单的demo$(document).ready(function(){$.adaptiveBackground.run();});在img标签中添加data-adaptive-background属性imgsrcimage.jpgdata-adaptive-background也可以通过提取盒子的背景图片设置其背景色给相应的盒子添加data-ab-css-background属性代码如下stylediv{background:url(image.png)no-repeat center/1px;}/styledivdata-adaptive-backgrounddata-ab-css-background/div3.相关APIvardefaults{selector:[data-adaptive-background1],//理想情况下此选择器将以img开头以确保我们只抓取并尝试处理实际图像parent:null,//CSS选择其表示该父应用背景颜色。默认情况下颜色应用于DOM树上的父级,也可以通过选择器进行设置eg:.father/#fatherexclude:[rgb(0,0,0),rgba(255,255,255)],shadeVariation:false,shadePercentage:0,shadeColors:{light:rgb(255,255,255),dark:rgb(0,0,0)},normalizeTextColor:false,//如果背景颜色太暗或太亮,正常化父文字的颜色,以便文字能够看清楚normalizedTextColors:{light:#fff,dark:#000},lumaClasses:{light:ab-light,dark:ab-dark},transparent:null};$.adaptiveBackground.run(defaults)我的个人博客,有空来坐坐