Задать z-index определенной части изображения

Question

Имеется картинка заданная background-ом, поверх которой находится слайдер, возможно ли только выделенной части задать z-index так, чтобы при пересечении выделенной области слайды за ней прятались

Answer 1

Вашу задачу возможно решить, например, используя CSS свойство clip-path. Вот пример:

.container {
  position: relative;
  overflow: hidden;
  width: 582px;
  height: 518px;
  padding-top: 162px;
  background: url("https://i.stack.imgur.com/tC72L.png") no-repeat;
}

.slider {
  overflow: hidden;
  overflow-x: scroll;
  white-space: nowrap;
  width: 582px;
  height: 118px;
}

.slider span {
  display: inline-block;
  width: 100px;
  height: 118px;
  margin: 10px;
  background-color: deepskyblue;
  border-radius: 10px;
}

.clock {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 582px;
  height: 518px;
  background: url("https://i.stack.imgur.com/tC72L.png") no-repeat;
  clip-path: polygon(10% 10%, 70% 20%, 55% 60%, 8% 60%, 21% 20%);
}

<div class="container">
  <div class="slider"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
  <div class="clock"></div>
</div>

Answer 2

Вот примерно так, можно сделать маску по цветам

const canvas = document.createElement('canvas'),
      ctx = canvas.getContext('2d');

document.querySelectorAll('img[data-filter]')
    .forEach(img => img.onload = () => applyFilter(img));

function applyFilter(img) {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    let filters = JSON.parse(img.dataset.filter);
    let d = ctx.getImageData(0, 0, img.width, img.height);
    for (let i = 0; i<d.data.length; i += 4) {
        d.data[i+3] = filters.reduce((a, f) => {
           if (a) return true
           a = true;
           for (let j = 0; j < 3; j++)
             a &= Math.abs(d.data[i+j]-f[j])/255 < f[3];  
           return a; 
        }, 0) ? 0 : 255;
    }
    ctx.putImageData(d,0,0);
    img.onload = () => {};
    img.setAttribute('src', canvas.toDataURL())
}

body {
  background: #fea;
}

<img data-filter="[
  [255, 255, 255, 0.01],
  [162, 212, 70, 0.2],
  [204, 252, 124, 0.2]
]" src="https://i.imgur.com/Z9ccdt9.png" crossorigin />

БЛОГ НА HUSL

Задать z-index определенной части изображения

Ответы (2 шт):