此处用到了
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属性
<img src="image.jpg" data-adaptive-background>
也可以通过提取盒子的背景图片设置其背景色，给相应的盒子添加data-ab-css-background属性，代码如下：
<style>div{background:url(image.png)no-repeat center/1px;}</style><div data-adaptive-background data-ab-css-background></div>
3.相关API
var defaults= {selector: '[data-adaptive-background="1"]',//理想情况下，此选择器将以img开头，以确保我们只抓取并尝试处理实际图像parent: null,//CSS选择其表示该父应用背景颜色。默认情况下，颜色应用于DOM树上的父级,也可以通过选择器进行设置，eg:'.father'/'#father'exclude: [ '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)
我的个人博客,有空来坐坐
