css 颜色着色 - 使用混合模式

Posted 2021-05-13

{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}

// alert('Hello world!');

<div style="background-image:url(http://csssecrets.io/images/tiger.jpg)" class="tinted-image"></div>

/**
 * Color tinting — with blending modes
 */

.tinted-image {
	width: 640px; height: 440px;
	background-size: cover;
	background-color: hsl(335, 100%, 50%);
	background-blend-mode: luminosity;
	transition: .5s background-color;
}

.tinted-image:hover {
	background-color: transparent;
}