img {filter: blur(5px);}
img {filter: contrast(200%);}
img {filter: grayscale(100%);}
img {filter: grayscale(100%);transition: filter 0.3s;}img:hover {filter: grayscale(0%);}
除了上面三个, CSS还提供了好多滤镜:
brightness(): 亮度调节saturate(): 饱和度调节sepia(): 复古褐色调hue-rotate(): 色相旋转（就是改变颜色）invert(): 反色opacity(): 透明度(和单独的opacity属性类似)drop-shadow(): 阴影效果(比text-shadow更强大)混合模式就像把两种颜色混合在一起会产生什么效果. 想象一下. 你用半透明的红色颜料涂在蓝色颜料上, 会看到紫色--这就是混合模式的基本原理.
CSS提供了两种混合模式: background-blend-mode和mix-blend-mode.
1）background-blend-mode: 背景层的混合
这个属性用于当一个元素有多个背景(比如背景图片+背景颜色时, 它们之间如何混合.
.box {width: 300px;height: 200px;background-image: url('landscape.jpg');background-color: #ff0000;background-blend-mode: multiply;}
常用混合模式:
normal: 默认，不混合multiply: 正片叠底，颜色会变暗screen: 滤色，颜色会变亮overlay: 叠加，保留高光和阴影darken: 变暗，保留较暗的颜色lighten: 变亮，保留较亮的颜色color-dodge: 颜色减淡color-burn: 颜色加深hard-light: 强光soft-light: 柔光difference: 差值exclusion: 排除hue: 色相saturation: 饱和度color: 颜色luminosity: 亮度h1 {background-image: linear-gradient(45deg, #ff0000, #0000ff);background-color: #ffffff;background-blend-mode: lighten;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.container {position: relative;}.overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(45deg, #ff0000, #0000ff);mix-blend-mode: color;}
.duotone {position: relative;}.duotone::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(45deg, #ff0000, #0000ff);mix-blend-mode: lighten;pointer-events: none; /*确保不会阻挡用户交互*/}
.vintage-photo {position: relative;filter: contrast(110%) brightness(110%) saturate(130%);}.vintage-photo img {width: 100%;display: block;}.vintage-photo::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: linear-gradient(to bottom, rgba(255, 0, 0, 0.3), rgba(0, 0, 255, 0.3));mix-blend-mode: soft-light;pointer-events: none;}
.neon-text {font-size: 5rem;font-weight: bold;color: #fff;text-shadow: 0 0 10px #ff00de, 0 0 20px #ff00de, 0 0 30px #ff00de;filter: brightness(120%);mix-blend-mode: screen;background: #000;padding: 20px;}
mix-blend-mode: screen让文字与背景产生滤色效果, 而brightness(120%)增强了整体的亮度.
优网科技，优秀企业首选的互联网供应服务商
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
