麻烦使用Color Theif作为背景图片

Question

我有一个包含4个盒子的部分，每个盒子里面的图像占据了整个盒子。我正在尝试使用Color Thief从每个图像中获取主色，并将其设置为图像上的滤镜。下面是它目前看起来的截图，以及我想要实现的目标。下面是与它有关的代码和我到目前为止所尝试的内容。非常感谢任何帮助！

现在看起来如何：

我想做什么：

HTML：

<div class="opinion">
  <div class="wrap">
    <div class="atable">
      <?php query_posts(array('post_type' => array('community', 'projects'),'posts_per_page' => 4,'post_parent' => 0, 'post_status' => array('publish'), 'orderby' => 'menu_order date')); ?>
      <?php while (have_posts()) : the_post(); ?>
        <div class="acell">
          <div class="contentbox">
            <?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID, 'issues'), 'large_size' );
            $url = $thumb['0']; ?>

            <ul class="slides">
              <li><a href="<?php the_permalink(); ?>" title="Permalink to <?php the_title(); ?>"><?php the_post_thumbnail('issues') ?><span><?php the_title(); ?></span></a></li>
            </ul>

          <!-- <a href="<?php the_permalink(); ?>" title="Permalink to <?php the_title(); ?>"><?php the_post_thumbnail('issues'); ?><h3><?php the_title(); ?></h3></a> -->
          </div>
        </div>
      <?php endwhile; wp_reset_query(); ?>
    </div>
  </div>
</div>

Color Thief js：

  var sourceImage = document.getElementById(".opinion .atable .acell .contentbox img");
  var colorThief = new ColorThief();
  colorThief.getColor(sourceImage);
  document.getElementById(".opinion .atable .acell .contentbox:after").style.backgroundColor = "rgb('color')";

CSS：

.opinion .atable .acell .contentbox {
position: relative;
}

.opinion .atable .acell .contentbox:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  height: 100%;
  width: 100%;
}

.opinion .atable .acell .contentbox img {
  width: 100%;
  height: auto;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-topright: 3px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  display: block;
  margin-bottom: 15px;
  position: relative;
}

.opinion .atable .acell .contentbox ul {
  list-style-type: none;
}

.opinion .atable .acell .contentbox ul li a {
  color: white;
  display: block;
  height: 200px;
  max-width: 100%;
  width: 100%;
}

.opinion .atable .acell .contentbox ul li a span {
  position: absolute;
  bottom: 0px;
  left: 0px;
  padding: 10px 10px 20px 10px;
  color: #fff;
  z-index: 10;
  display: inline-block;
  font-size: 1.2em;
  text-shadow: 1px 1px 1px #000;
  -webkit-border-top-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
  border-top-left-radius: 4px;
}