用css实现改变图片滤镜

一八五清纯女高

已于 2024-09-30 20:41:52 修改

阅读量635

点赞数 15

文章标签： html css 前端

于 2024-09-30 11:08:09 首次发布

本文链接：https://blog.csdn.net/BANaanaa/article/details/142652179

版权

常见的滤镜属性

blur(px)：模糊效果
brightness(%)：亮度
contrast(%)：对比度
grayscale(%)：灰度
sepia(%)：怀旧效果
invert(%)：反转颜色
opacity(%)：不透明度
hue-rotate(deg)：色相旋转

以下是滤镜示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>滤镜</title>
		<style type="text/css">
			img {
				width: 400px;
				height: 250px;
				display: block;
				margin: 0 auto;
				transition: all 3s;
				/*鼠标放上去恢复原效果，动画时间3秒*/
			}

			/* -webkit-这个是做低版本兼容 */
			img:hover {
				-webkit-filter: none;
			}

			.img1 {
				/*滤镜属性
				 * grayscale:设置灰度，1是百分之百，0是百分之零
				 * */
				-webkit-filter: grayscale(0.5);
			}

			.img2 {
				/*滤镜属性
				 * brightness:设置亮度，默认值是1，正常亮度,比1大曝光
				 * */
				-webkit-filter: brightness(0);
			}

			.img3 {
				/*滤镜属性
				 * sepia:设置褐色属性，1为百分百褐色，0为默认正常
				  */
				-webkit-filter: sepia(1);
			}

			.img4 {
				/*滤镜属性
				 * blur:设置模糊度，单位是像素
				 * */
				-webkit-filter: blur(5px);
			}

			.img5 {
				/*滤镜属性
				 * contrast:设置对比度，正常是1
				 * */
				-webkit-filter: contrast(0);
			}

			.img6 {
				/*滤镜属性
				 * saturate:设置饱和度，正常是1
				 * */
				-webkit-filter: saturate(2);
			}

			.img7 {
				/*滤镜属性
				 * invert:设置胶片底色效果
				 * */
				-webkit-filter: invert(1);
			}

			.img8 {
				/*滤镜属性
				 * hue-rotate:设置色相旋转
				 * */
				-webkit-filter: hue-rotate(90deg);
			}

			.img9 {
				/*实现图像慢慢画出来
				 * */
				-webkit-filter: blur(1px)brightness(60)grayscale(1);
			}
		</style>
	</head>
	<body>
		<!-- 记得更改图片链接src。我用的图片是封面 -->
		<img class="img0" src="./img/鬼刀..png" />
		<img class="img1" src="./img/鬼刀..png" />
		<img class="img2" src="./img/鬼刀..png" />
		<img class="img3" src="./img/鬼刀..png" />
		<img class="img4" src="./img/鬼刀..png" />
		<img class="img5" src="./img/鬼刀..png" />
		<img class="img6" src="./img/鬼刀..png" />
		<img class="img7" src="./img/鬼刀..png" />
		<img class="img8" src="./img/鬼刀..png" />
		<img class="img9" src="./img/鬼刀..png" />
	</body>
</html>