/* 底片效果 */ img { filter: invert(100%); } /* 黑白照片效果 */ img { filter: grayscale(100%); } /* 模糊效果 */ img { filter: blur(5px); } /* 反转图像颜色 */ img { filter: hue-rotate(180deg); } /* 饱和度降低 */ img { filter: saturate(50%); } /* 透明度 */ img { opacity: 0.5; } /* 图像旋转 */ img { transform: rotate(180deg); } /* 图像缩放 */ img { transform: scale(0.5); } /* 图像倾斜 */ img { transform: skew(30deg); } /* 图像移动 */ img { transform: translate(50px, 100px); }
以上代码演示了一些基本的CSS图片渲染效果,你可以在其中挑选适合你的效果来使用。除此之外,你也可以通过调整数值来创造自己的图片渲染效果。希望这篇文章能够为你提供一些有用的信息!