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%)增强了整体的亮度.
優(yōu)網(wǎng)科技，優(yōu)秀企業(yè)首選的互聯(lián)網(wǎng)供應(yīng)服務(wù)商
優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營(yíng)理念，誠(chéng)信務(wù)實(shí)的服務(wù)了近萬(wàn)家客戶，成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長(zhǎng)期合作伙伴！
優(yōu)網(wǎng)科技成立于2001年，擅長(zhǎng)網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門戶型、營(yíng)銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動(dòng)端應(yīng)用（手機(jī)站、APP開發(fā)）、微信定制開發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。
公安局備案號(hào)：
專屬顧問(wèn)
