使用AdaptiveBackgrounds.js从图像到背景输入主要颜色

对于某些设计师来说，他们更喜欢在内容本身内部使用一些主要的颜色-AdaptiveBackgrounds.js可以自动为您做到这一点。

背景与正确内容的良好组合会严重影响用户体验。

在Web上展示某些内容时，一些开发人员通常会很难决定哪些背景最适合使用。

它建立在同一开发人员制造的RGBaster之上。

AdaptiveBackgrounds.js是一个免费的jQuery插件，可帮助您轻松地将内容中最主要的颜色调整为背景。

您可以在此gif中查看其工作方式。

然后将提取的颜色应用于图像父对象。

页面第一次加载时，插件将从图像中提取颜色。

基本上，这是一个插件，可提取图像的调色板以获取主导色 。

入门

您可以从其GitHub 页面获取插件文件。

尽管它基于RGBaster构建，但是您不再需要包含它。

AdaptiveBackgrounds.js需要jQuery库才能工作。

然后将所有必需的文件包括到您的项目中，如下所示：

<script type="text/javascript" src='js/jquery.js'></script>
<script type="text/javascript" src='js/jquery.adaptive-backgrounds.js'></script>

适应主要色彩

我们将尝试使用此工具，并使用它从Kartik Ramanathan的这张“ Double Arch”图片中提取主色，然后将其应用于父元素。

在img标记内，给data-adaptive-background属性，如下所示，以便脚本可以获取颜色：

为了将主要颜色应用于元素，应将图像作为其子元素。

<div class='wrapper'>
  <img id="img" src="images/double-arch.jpg" data-adaptive-background='1'>
</div>

如果直接将img放在body ，则所有主体将应用主导色。

接下来，通过添加以下JavaScript代码来调用插件：

<script type="text/javascript">
 $(document).ready(function(){
  $.adaptiveBackground.run()
 });
</script>

因此，我们已将主导色应用于图像。

有关更多示例和其他设置，您可以访问AdaptiveBackgrounds.js 文档页面。

最终思想

如果您这样做，请查看AdaptiveBackgrounds.js 演示页以获取更多想法。

您可能想要尝试给背景多一点颜色，以取得引人注目的效果。

使用AdaptiveBackgrounds.js，您将仅获得静态颜色。

翻译自: https://www.hongkiat.com/blog/image-dominant-color-background-adaptivebackgroud-js/