<div class="container">
<img src="https://img.91temaichang.com/google.png">
<p>
原图
</p>
</div>
<div class="container">
<img class="grayscale" src="https://img.91temaichang.com/google.png">
<p>
灰度变化
<div>
filter: grayscale(0.5)
</div>
</p>
</div>
<div class="container">
<img class="sepia" src="https://img.91temaichang.com/google.png">
<p>
褐色变化
<div>
filter: sepia(0.8)
</div>
</p>
</div>
<div class="container">
<img class="invert" src="https://img.91temaichang.com/google.png">
<p>
反相变化
<div>
filter: invert(1)
</div>
</p>
</div>
<div class="container">
<img class="hue-rotate" src="https://img.91temaichang.com/google.png">
<p>
色轮变化
<div>
filter: hue-rotate(60deg)
</div>
</p>
</div>.container{
display: inline-block;
margin: 8px;
border: 2px solid;
padding: 8px;
text-align: center;
}
p{
text-align: center;
}
.grayscale{
filter: grayscale(0.5);
}
.sepia{
filter: sepia(0.8);
}
.invert{
filter: invert(1);
}
.hue-rotate{
filter: hue-rotate(60deg);
}
External CSS
This Pen doesn't use any external CSS resources.