风格化图片

60 阅读1分钟
<div class="moare">
	<img src="https://picx.zhimg.com/v2-3b4fc7e3a1195a081d0259246c38debc_720w.jpg?source=172ae18b" alt="" />
</div>
.moare {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	filter: contrast(2000%);
	overflow: hidden;
}

.moare::before {
	content: "";
	position: absolute;
	top: -50%;
	left: -50%;
	bottom: -50%;
	right: -50%;
	background: radial-gradient(circle at center, #333, #fff);
	background-size: 0.25em 0.25em;
	transform: rotate(20deg);
}

.moare img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	mix-blend-mode: hard-light;
	filter: grayscale(1) brightness(80%) contrast(150%) blur(2px);
}


效果:

image.png =======》

image.png