此处用到了
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)