当我们单击图片缩略图时，如何在其上显示真实色彩？

Question

在我的项目中，当我单击四张不同的图片之一时，我尝试制作一张彩色图片。

这四张不同的图片是缩略图，当我单击缩略图时，该图片处于活动状态，我希望此活动缩略图具有正确的徽标颜色，例如此处的Photoshop配置文件。其他缩略图为灰色，因为我们没有单击它，因此它们被认为是非活动的。

因此，我尝试使用过滤器属性执行此操作，但没有找到正确的解决方案。 那么您能帮我找到正确的解决方案吗？

我可以向我展示我的项目代码：

Vue.component('carousel', {
    template: `
        <div class="card-carousel" >
            <div class="thumbnails">
               
                <div 
                v-for="(image, index) in images" 
                :key="image.id" 
                :class="['thumbnail-image', (activeImage == index) ? 'active' : '']" 
                @click="activateImage(index)"> 
                <img :src="image.thumb" class="active"/>
                   
                </div>
            </div>
            <div class="containe-carousel">

                <span id = "textespan"> {{currentImage.text}}</span>
            <div class="photoshop-screenshot">                
            <img :src="currentImage.big"  alt="">
                    
            </div>
            <div class="card-img">
                <img :src="currentImage2.big2" alt="">
                   

            </div>
            </div>
        </div>
    `,
    computed: {

        currentImage() {
            return this.images[this.activeImage];
        },

        currentImage2() {
            return this.images[this.activeImage];
        }
     
    },

        data() {
            return {
                activeImage: 0,
            
            }
        },

        methods: {     
            activateImage(imageIndex) {
                this.activeImage = imageIndex;
            },  
            
        
        },
    
        props: ['images']
    });

.section{
    background-color: black;
}

.card-carousel {
    user-select: none;
    position: relative;
}

.containe-carousel {
    padding-top: 5%;
}

.thumbnails {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;

}

.thumbnail-image {
    display: fixed;
    align-items: center;
    cursor: pointer;
    padding: 2px;

}

.thumbnail-image > img {
    width: 100%;
    height: auto;
    transition: all 250ms;
    filter:  grayscale(100%);

}

.thumbnail-image:selected> img {
    box-shadow: 2px 2px 6px 1px rgba(0,0,0, 0.5);
    visibility: hidden;
    filter: none;
}


.card-img { 
    position: relative;
}

 .card-img > img {
   
    margin: 0 auto;
    padding-top: 7%;
    z-index: 2; 
}

 .photoshop-screenshot {
    position:absolute;
    z-index: 1;
    width: 65%;
    left:50%;top:75%;
 
}

.active{ 
    filter:    contrast(1000%)
    /* black to white */
    invert(100%)
    /* white to off-white */
    sepia(100%)
    /* off-white to yellow */
    saturate(10000%)
    /* do whatever you want with yellow */
    hue-rotate(90deg);

}

#textespan {
    text-align: center;
    font-size: 300%;
}

.containe-carousel span {
    
    color: white;
    font-weight: bold;
}

         
        <section class="section" id="app">
            <div class="container">
                <div class="text-center" style="margin:0px 50px">
                    <div class="heading-underscore">
                        <h2 class="dk-5q-color">
                             <?php say("X50Q-dashboard-title"); ?>
                         </h2> 
                    </div>
                    
                </div>
                <div class="columns">
                     <div class="column "> 
                        <div class="card-content">
                            <carousel
                                :starting-image="0"
                                :show-progress-bar="true"
                                :images="images"     
                            ></carousel>
                    
                        </div>   
                    </div> 
                </div>
            </div>            
    </section>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
    
<script src ="/x/x50q-rgb-mechanical-keyboard/x50q-cloud-js.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data() { 
                
                return {
                    images: [
                       
                        {
                            text : 'Photoshop',
                            id: '1',
                            big: '/images/das-keyboard-x50q/photoshop-profile.PNG',
                            big2: '/images/das-keyboard-x50q/photoshop-screenshot.png',
                            thumb: '/images/das-keyboard-x50q/photoshop-logo.jpg'
                        },
                        {
                            text : 'Aurocad',
                            id: '2',
                            big: '/images/das-keyboard-x50q/autocad-profile.png',
                            big2: '/images/das-keyboard-x50q/autocad-screenshot.png',
                            thumb: '/images/das-keyboard-x50q/autocad-logo.png'
                        },
                        {
                            text : ' Counter-Strike',
                            id: '3',
                            big: '/images/das-keyboard-x50q/counterstrike-profile.png',
                            big2: '/images/das-keyboard-x50q/counterstrike-screenshot.jpg',
                            thumb: '/images/das-keyboard-x50q/counterstrike-logo.png'
                        },
                        {
                            text : 'League of Legends',
                            id: '4',
                            big: '/images/das-keyboard-x50q/leagueoflegends-profile.png',
                            big2: '/images/das-keyboard-x50q/leagueoflegends-screenshot.png',
                            thumb: '/images/das-keyboard-x50q/leagueoflegends-logo.jpg'
                        }
                    ],
                    
                
                }
            }
        });
    </script>
                    

Answer 1

问题1：.active过滤器无法消除灰度

点击图像后，您将应用.active类，该类将应用夸张的滤镜（使其看起来像负片）而不是去除灰度：

.active {
    filter:    contrast(1000%)
    /* black to white */
    invert(100%)
    /* white to off-white */
    sepia(100%)
    /* off-white to yellow */
    saturate(10000%)
    /* do whatever you want with yellow */
    hue-rotate(90deg);
}

CSS应该是：

filter: grayscale(0);

或删除所有过滤器：

filter: none;

问题2：所有缩略图均为.active

虽然.active类是动态添加到.thumbnail-image的，但是它也静态地应用于所有缩略图（img子元素）。这将使所有图像始终显示为“活动”状态。静态类应删除：

<!-- <img :src="image.thumb" class="active"/> --> <!-- DON'T DO THIS -->
<img :src="image.thumb">

或者，您可以将.thumbnail-image和.active的动态设置从容器div移到img本身。

问题3：.active并不针对img

.active类应用于.thumbnail-image（img容器），但是您确实想将过滤器应用于img子元素，因此您将必须将您的CSS选择器修改为：

.active > img {
  ...
}

如果您选择将动态类设置移动到img本身（如前所述），则不必在此处修改选择器。

修复程序演示

Vue.component("carousel", {
  template: `
        <div class="card-carousel" >
            <div class="thumbnails">
                <div v-for="(image, index) in images" 
                    :key="image.id" 
                    :class="['thumbnail-image', (activeImage == index) ? 'active' : '']" 
                    @click="activateImage(index)"> 
                  <img :src="image.thumb" />
                </div>
            </div>
            <div class="containe-carousel">
                <span id="textespan"> {{currentImage.text}}</span>
                <div class="photoshop-screenshot">
                  <img :src="currentImage.big"  alt="">
                </div>
                <div class="card-img">
                  <img :src="currentImage2.big2" alt="">
                </div>
            </div>
        </div>
    `,
  computed: {
    currentImage() {
      return this.images[this.activeImage];
    },

    currentImage2() {
      return this.images[this.activeImage];
    }
  },

  data() {
    return {
      activeImage: 0
    };
  },

  methods: {
    activateImage(imageIndex) {
      this.activeImage = imageIndex;
    }
  },

  props: ["images"]
});

new Vue({
  el: "#app",
  data: () => ({
    images: [
      {
        text: "Photoshop",
        id: "1",
        big: "//placekitten.com/201/201",
        big2: "//placekitten.com/201/201",
        thumb: "//placekitten.com/201/201"
      },
      {
        text: "Aurocad",
        id: "2",
        big: "//placekitten.com/202/202",
        big2: "//placekitten.com/202/202",
        thumb: "//placekitten.com/202/202"
      },
      {
        text: " Counter-Strike",
        id: "3",
        big: "//placekitten.com/203/203",
        big2: "//placekitten.com/203/203",
        thumb: "//placekitten.com/203/203"
      },
      {
        text: "League of Legends",
        id: "4",
        big: "//placekitten.com/204/204",
        big2: "//placekitten.com/204/204",
        thumb: "//placekitten.com/204/204"
      }
    ]
  })
});

.section {
  background-color: black;
}

.card-carousel {
  user-select: none;
  position: relative;
}

.containe-carousel {
  padding-top: 5%;
}

.thumbnails {
  display: flex;
  justify-content: space-evenly;
  flex-direction: row;
}

.thumbnail-image {
  display: fixed;
  align-items: center;
  cursor: pointer;
  padding: 2px;
}

.thumbnail-image > img {
  width: 100%;
  height: auto;
  transition: all 250ms;
  filter: grayscale(100%);
}

.thumbnail-image:selected > img {
  box-shadow: 2px 2px 6px 1px rgba(0, 0, 0, 0.5);
  visibility: hidden;
  filter: none;
}

.card-img {
  position: relative;
}

.card-img > img {
  margin: 0 auto;
  padding-top: 7%;
  z-index: 2;
}

/* .photoshop-screenshot {
  position: absolute;
  z-index: 1;
  width: 65%;
  left: 50%;
  top: 75%;
} */

.active > img {
/*   filter: contrast(1000%) invert(100%) sepia(100%) saturate(10000%)
    hue-rotate(90deg); */
  filter: grayscale(0);
}

#textespan {
  text-align: center;
  font-size: 300%;
}

.containe-carousel span {
  color: white;
  font-weight: bold;
}

<script src="https://unpkg.com/vue@2.5.17"></script>

<section class="section" id="app">
  <carousel :starting-image="0"
            :show-progress-bar="true"
            :images="images"></carousel>
</section>

Answer 2

您只需要CSS。

.thumbnail-image > img {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

.thumbnail-image > img:active {
    filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
}

Answer 3

您可以创建一个没有grayscale的类，并创建一个带有grayscale的普通标签img。在我的示例中，为clicked元素添加没有灰度的类color，并为其他图像进行迭代并删除颜色类。像这样：

function onClick(it) {
 
  const withColor = it.parentElement
    .getElementsByClassName('color')[0];
    
  if(withColor)
    withColor.classList.remove('color');
    
  it.classList.add( 'color' );
  
  
}

#images {
  display: flex;
}

img {
  margin: 10px;
  width: 100px;
  height: 100px;
  filter: grayscale( 100% );
  border: 3px solid transparent;
}

img.color {
  filter: grayscale( 0% );
  transition: filter 400ms;
  border: 3px solid green;
  border-radius: 2px
}

<div id="images">

   <img src="https://i.stack.imgur.com/MagOw.jpg" class="image" onclick="onClick(this)">
   
   <img src="https://i.stack.imgur.com/MagOw.jpg" class="image" onclick="onClick(this)">
   
   <img src="https://i.stack.imgur.com/MagOw.jpg" class="image" onclick="onClick(this)">
   
   

</div>