Question

我使用彩色小偷从每张图像中提取主色，并将该颜色设置为图像上的方框阴影。显示了4个图像，因此我将它们存储在一个数组中，循环遍历数组，从每个数据中提取主色，并在每次循环时将其设置为boxShadow。我无法弄清楚我的代码出了什么问题，因为一切都没有发生，任何帮助都会非常感激！

JS：

  var slides = document.getElementsByClassName('slideImg');

  for (var i = 0; i < slides.length; i++) {
    var sourceImage = slides[i];
    var colorTheif = new ColorThief();
    var color = colorTheif.getColor(sourceImage);
    slides[i].style.boxShadow = "inset 0 0 0 350px color";
  };

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', array('class' => 'slideImg')) ?><span class="yo"><?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>

CSS：

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

.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.3em;
  text-shadow: 1px 1px 1px #000;
  -webkit-border-top-left-radius: 4px;
  -moz-border-radius-topleft: 4px;
  border-top-left-radius: 4px;

Answer 1

在JavaScript中，您不能在字符串中包含变量，您必须将其添加到+ operator的字符串中。

slides[i].style.boxShadow = "inset 0 0 0 350px " + color;

麻烦使用javascript设置box-shadow

1 个答案: