Как изменить многоцветный оверлей на изображении? - PullRequest
Новая
       13

Как изменить многоцветный оверлей на изображении?

0 голосов
/ 07 марта 2019

Я пытаюсь изменить это, чтобы цвета менялись несколько раз при наведении на изображение. Я не могу заставить цвет реагировать на непрозрачность в CSS, и мое изображение не отображается. Я установил непрозрачность на 0,9, и цвета по-прежнему отображаются жирным шрифтом. В конце концов я хотел бы изменить его, чтобы облака меняли цвет, а не всю фотографию. 

var nopics = 12;
    var partitionsMultiplier = new Array();
    var partitionsWidth = new Array();
        for (var i = 0; i < nopics; i++) {

            if (i == 0) partitionsMultiplier[i] = 1 / nopics;
            else partitionsMultiplier[i] = partitionsMultiplier[i-1] + (1 / nopics);
            partitionsWidth[i] = (partitionsMultiplier[i]) * (document.getElementById('dd1').offsetWidth);
        }
    
    $('body').mousemove(function (e) {
        var left1 = e.pageX - $('#dd1').offset().left;
        var top1 = e.pageY - $('#dd1').offset().top;

        var str = $('#dd1').attr("class").toString().split(" ");
        
        
        
       switch(true)
       {
           case (left1 < partitionsWidth[0]): $('#dd1').switchClass(str[1], "s1"); break;
           case (left1 < partitionsWidth[1]): $('#dd1').switchClass(str[1], "s2"); break;
           case (left1 < partitionsWidth[2]): $('#dd1').switchClass(str[1], "s3"); break;
           case (left1 < partitionsWidth[3]): $('#dd1').switchClass(str[1], "s4"); break;
           case (left1 < partitionsWidth[4]): $('#dd1').switchClass(str[1], "s5"); break;
           case (left1 < partitionsWidth[5]): $('#dd1').switchClass(str[1], "s6"); break;
           case (left1 < partitionsWidth[6]): $('#dd1').switchClass(str[1], "s7"); break;
           case (left1 < partitionsWidth[7]): $('#dd1').switchClass(str[1], "s8"); break;
           case (left1 < partitionsWidth[8]): $('#dd1').switchClass(str[1], "s9"); break;
           case (left1 < partitionsWidth[9]): $('#dd1').switchClass(str[1], "s10"); break;
           case (left1 < partitionsWidth[10]): $('#dd1').switchClass(str[1], "s11"); break;
           case (left1 < partitionsWidth[11]): $('#dd1').switchClass(str[1], "s12"); break;
       default:break;
       }
  
    });
.container {
  width: 100%;
height: 500px;
}

.slide {
  width: 100%;
height: 100%;
  display: block;

  background-image:url('https://vgy.me/0fBkdy.jpg');

  padding: 80px 0;

}


.s1 {
  background: #FFC0CB;
  opacity:0.9;
  z-index:-1;
}
.s2 {
  background: #FFB6C1;
  opacity:0.9;
  z-index:-1;
}
.s3 {
  background: #FF69B4;
  opacity:0.9;
  z-index:-1;
}
.s4 {
  background: #FF1493;
  opacity:0.9;
  z-index:-1;
}
.s5 {
  background: #DB7093;
  opacity:0.9;
  z-index:-1;
}
.s6 {
  background: #C71585;
  opacity:0.9;
  z-index:-1;
}
.s7 {
  background: #8B008B;
  opacity:0.9;
  z-index:-1;
}
.s8 {
  background: #9932CC;
  opacity:0.9;
  z-index:-1;
}
.s9 {
  background: #8B008B;
  opacity:0.9;
  z-index:-1;
}
.s10 {
  background: #9370DB;
  opacity:0.9;
  z-index:-1;
}
.s11 {
  background: #FF00FF;
  opacity:0.9;
  z-index:-1;
}
.s12 {
  background: #EE82EE;
  opacity:0.9;
  z-index:-1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
			  src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
			  integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
			  crossorigin="anonymous"></script>
<div class="container">
  <div id="dd1" class="slide s1"></div>
</div>
...