用 CSS3 将图像转换为灰度
要在 CSS3 中将图像转换为灰度,请使用滤镜属性的灰度值。
示例
让我们看一个示例——
<!DOCTYPE html> <html> <head> <style> img.demo { filter: brightness(120%); filter: contrast(120%); filter: grayscale(130%); } </style> </head> <body> <h1>Spring Framework</h1> <img src="https://tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring" width="160" height="150"> <h1>Learn MySQL</h1> <p>Below image is brighter and has more contrast than the original image above. With that the image is in grayscale:</p> <img class="demo" src="https://tutorialspoint.com/spring/images/spring-mini-logo.jpg" alt="Spring" width="160" height="150"> </body> </html>
输出
广告