CSS）「mix-blend-mode」の「multiply」で、JPEG画像を半透明（透過）に重ねて表示。

CSSの「mix-blend-mode」の「multiply」のテスト。

以下の3つのJPG画像を「multiply（乗算）」で半透明に重ねて表示。

≪HTMLとCSS≫

<style>
div {
	position: relative;
}
img {
	border: 1px #000 solid;
}
.multiply > img {
	mix-blend-mode: multiply;
	position: absolute;
}
</style>
<div>
	<img src="image/320/red.jpg">
	<img src="image/320/blue.jpg">
	<img src="image/320/yellow.jpg">
</div>
<div class="multiply">
	<img src="image/320/red.jpg">
	<img src="image/320/blue.jpg">
	<img src="image/320/yellow.jpg">
</div>

≪サンプルページ≫

https://ok2nd.github.io/Test/mix-blend-mode/multiply.html

重ねたイメージ画像。

以前に、GIMPでPNG透過画像を使って重ねたものを、JPEGで「mix-blend-mode」を使って重ねてみた。

オリジナル画像そのままだと、濃すぎるので、opacity: 0.8 で少し薄くして使用。

<style>
div {
	position: relative;
}
img {
	border: 1px #000 solid;
	width: 400px;
}
.opacity > img {
	opacity: 0.8;
}
.multiply > img {
	mix-blend-mode: multiply;
	position: absolute;
}
</style>
<div>
	<img src="image/001-g.jpg">
	<img src="image/002-g.jpg">
</div>
<div class="opacity">
	<img src="image/001-g.jpg">
	<img src="image/002-g.jpg">
</div>
<div class="opacity multiply">
	<img src="image/001-g.jpg">
	<img src="image/002-g.jpg">
</div>