Может ли HTML и CSS создавать наложение, которое автоматически игнорирует прозрачную область на изображении?

Например, у него есть изображение с прозрачным фоном:

И я хотел бы добавить на него серый оверлей (например, div или холст...):

Но я хочу, чтобы наложение автоматически игнорировало прозрачную область на изображении:

Может ли чистый HTML и CSS (например, div, canvas...) сделать это?

Ответы

Ответ 1

Попробуйте использовать режим наложения. Или умножьте! (Не поддерживается IE или Edge, спасибо @Stilltorik)

.multiplied {
  background-color: blue;
  width:250px;
  height: 100px;
  margin-top: -100px;
  mix-blend-mode: overlay;
}

<div>
  <img src='https://i.stack.imgur.com/4yUEW.png'/>
  <div class='multiplied'></div>
</div>

Ответ 2

Несколько хакерский способ:

.alpha-mask {
  mask-image: url(https://i.stack.imgur.com/FwTzE.png);
  -webkit-mask-image: url(https://i.stack.imgur.com/FwTzE.png);
  mask-mode: alpha;
  -webkit-mask-mode: alpha;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
}

.overlay {
  background-color: #000;
  position: absolute;
  top: 120px;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
}

<article class="alpha-mask">
  <img class="alpha-target" src="https://i.stack.imgur.com/FwTzE.png" />
  <div class="overlay alpha-target">
  </div>
</article>

Ответ 3

Не зная полного варианта использования этого вопроса, я бы сказал, что ответ "Да, но кросс-браузерная совместимость будет неприятной".

Два других ответа, размещенные здесь, показывают, как это может быть достигнуто, если совместимость не является проблемой, но я думаю, что это то, что можно сделать гораздо проще с помощью какого-то творческого фотошопа, а затем слоистых элементов.

Что я буду делать:

Photoshop: Возьмите базовое изображение (которое я предполагаю, это PNG, поскольку он имеет альфа-канал) и загружает его в Photoshop. Выберите область, которую вы хотите замаскировать. edit > копировать. Создайте новый слой и отредактируйте > вставить. Измените цвет этого нового слоя как цвет, который вы хотите, чтобы наложение маскировки было, и добавьте эффект альфа-канала. Убедитесь, что фон по умолчанию выключен, а затем сохраните новый слой как PNG.

HTML:

<div class="container">
  <div class="original-image"></div>
  <div class="mask"></div>
</div>

CSS

.container {
  height: 300px;
  width: 300px;
  position: relative;
}

.original-image {
  height: 300px;
  width: 300px;
  background : url(../images/myimage.png) no-repeat top center;
}

.mask {
  height: 300px;
  width: 300px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1; //or more depending on what else is going on in the layout
  background : url(../images/mask.png) no-repeat top center;
}

В этом примере важно, чтобы контейнер имел те же размеры, что и изображение и маска, чтобы абсолютное позиционирование правильно выравнивало маску над изображением. Создание изображений во фонов позволяет заполнить divs содержимым типа. Главное преимущество этого сделать, а не с CSS, предложенным в другом месте здесь, заключается в том, что это должно работать практически на каждом браузере.

Ответ 4

Вот подход на основе холста:

HTML:

<canvas id="canvas" width="500" height="500"></canvas>

JS:

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");

var star = new Image();
star.src = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Light_blue_star.svg/500px-Light_blue_star.svg.png";

star.onload = function() {
  //Draw our image on the canvas
  ctx.drawImage(star, 0, 0);
  //Blend a rectangle over it
  ctx.fillStyle = '#f00ba2';
  ctx.globalCompositeOperation = "multiply";
  ctx.fillRect(0, 250, 500, 250);
  //Clip the output with the non transparent pixels of the original image with destination-in compositing mode
  ctx.globalCompositeOperation = "destination-in";
  ctx.drawImage(star, 0, 0);
}