首页前端开发CSScss3 滤镜图片变红

css3 滤镜图片变红

时间2023-12-04 18:00:04发布访客分类CSS浏览257
导读:CSS3滤镜能够对图片进行颜色、模糊、亮度、对比度等的处理,让图片表现出不同的效果。下面是一段CSS3代码,通过滤镜实现将图片变红的效果:img{filter: grayscale(100% /* 将图片灰度化 */contrast(100...

CSS3滤镜能够对图片进行颜色、模糊、亮度、对比度等的处理,让图片表现出不同的效果。

下面是一段CSS3代码,通过滤镜实现将图片变红的效果:

img{
    filter: grayscale(100%)/* 将图片灰度化 */contrast(100%)/* 提高图片对比度 */brightness(-50%)/* 降低图片亮度 */saturate(200%)/* 提高图片饱和度 */hue-rotate(90deg);
/* 偏移图片颜色 */}
    

以上代码中,通过控制grayscale(灰度化)和hue-rotate(颜色偏移)属性,实现将图片变成红色。

使用CSS3滤镜可以实现很多有趣的效果,但要注意不同浏览器兼容性的问题。

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: css3 滤镜图片变红
本文地址: https://pptw.com/jishu/567963.html
css3 漂亮字体样式 css基本使用规则是怎样的

游客 回复需填写必要信息