Javascript 对背景图像使用彩色THIF时出现问题

我有一个部分，包含4个盒子，每个盒子里面都有图像，占据了整个盒子。我尝试使用颜色窃贼从每个图像中获取主色，并将其设置为图像上的过滤器。下面是它目前的外观截图，以及我正在努力实现的目标。下面是与之相关的代码以及我迄今为止所尝试的内容。任何帮助都将不胜感激

现在的样子：

我想做的是：

HTML:

CSS:

---

您面临的具体问题是什么？我的代码在尝试对图像设置过滤器时不起作用。如果你看一下截图，你会发现在第二张截图中，图像上有一个过滤器。过滤器必须是它结束的图像的主色。首先，您尝试使用

getElementById

选择器按类名获取元素，但这不起作用，此外，代码将选择每一个图像，而不仅仅是一个图像，这是需要传递给color小偷的内容。另外，你需要传递图像的来源，而不是元素本身。谢谢你提供的信息。关于如何使它动态化，从而使它适用于每个图像，有什么建议吗？每次提交新帖子时，这些图片都会发生变化，所以它需要是动态的。我还注意到，您没有定义变量

color

，它应该是

var color=colorshift.getColor（sourceImage）
<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>

  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')";

.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;
}