CSS系列（11）-- 滤镜与混合模式详解

前端技术探索系列：CSS 滤镜与混合模式详解 🎨

致读者：探索视觉效果的艺术 👋

前端开发者们，

今天我们将深入探讨 CSS 滤镜与混合模式，学习如何创建独特的视觉效果。

滤镜效果详解 🚀

基础滤镜

/* 基础滤镜效果 */
.filter-basic {/* 模糊 */filter: blur(5px);/* 亮度 */filter: brightness(150%);/* 对比度 */filter: contrast(200%);/* 灰度 */filter: grayscale(100%);/* 色相旋转 */filter: hue-rotate(90deg);/* 反相 */filter: invert(100%);/* 透明度 */filter: opacity(50%);/* 饱和度 */filter: saturate(200%);/* 褐色 */filter: sepia(100%);/* 阴影 */filter: drop-shadow(2px 4px 6px black);
}/* 组合滤镜 */
.filter-combined {filter: contrast(150%) brightness(110%) saturate(120%)hue-rotate(10deg);
}

创意滤镜效果

/* 毛玻璃效果 */
.frosted-glass {background: rgba(255, 255, 255, 0.2);backdrop-filter: blur(10px);
}/* 动态滤镜 */
.hover-filter {transition: filter 0.3s ease;
}.hover-filter:hover {filter: brightness(110%) contrast(110%) saturate(120%);
}/* 图片滤镜预设 */
.filter-preset {/* Instagram-like 效果 */&.nashville {filter: sepia(20%)contrast(150%)brightness(110%)hue-rotate(-10deg);}/* 复古效果 */&.vintage {filter:grayscale(50%)sepia(40%)brightness(90%)contrast(120%);}
}

混合模式详解 🎯

基础混合模式

/* 混合模式基础 */
.blend-basic {/* 背景混合 */background-blend-mode: multiply;/* 元素混合 */mix-blend-mode: overlay;
}/* 常用混合模式 */
.blend-modes {/* 正片叠底 */mix-blend-mode: multiply;/* 叠加 */mix-blend-mode: overlay;/* 滤色 */mix-blend-mode: screen;/* 柔光 */mix-blend-mode: soft-light;/* 强光 */mix-blend-mode: hard-light;/* 差值 */mix-blend-mode: difference;/* 排除 */mix-blend-mode: exclusion;
}

创意混合效果

/* 双重曝光效果 */
.double-exposure {position: relative;&::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image: url('texture.jpg');mix-blend-mode: multiply;}
}/* 文字混合效果 */
.blend-text {position: relative;color: white;mix-blend-mode: difference;&::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: white;mix-blend-mode: difference;}
}

实践项目：图片效果处理器 🛠️

class ImageEffectProcessor {constructor(options = {}) {this.options = {presets: {vintage: {filters: [{ type: 'grayscale', value: 50 },{ type: 'sepia', value: 40 },{ type: 'brightness', value: 90 },{ type: 'contrast', value: 120 }],blend: 'multiply'},dramatic: {filters: [{ type: 'contrast', value: 150 },{ type: 'brightness', value: 110 },{ type: 'saturate', value: 120 }],blend: 'overlay'}},...options};this.init();}init() {this.createStyles();this.setupControls();}createStyles() {const style = document.createElement('style');style.textContent = this.generateStyles();document.head.appendChild(style);}generateStyles() {return `${this.generatePresetStyles()}${this.generateUtilityStyles()}`;}generatePresetStyles() {let styles = '';Object.entries(this.options.presets).forEach(([name, preset]) => {styles += `.preset-${name} {filter: ${this.createFilterString(preset.filters)};mix-blend-mode: ${preset.blend};}`;});return styles;}createFilterString(filters) {return filters.map(filter => `${filter.type}(${filter.value}${this.getUnit(filter.type)})`).join(' ');}getUnit(filterType) {const units = {blur: 'px',brightness: '%',contrast: '%',grayscale: '%',hue-rotate: 'deg',invert: '%',opacity: '%',saturate: '%',sepia: '%'};return units[filterType] || '';}applyEffect(element, preset) {const presetConfig = this.options.presets[preset];if (!presetConfig) return;element.style.filter = this.createFilterString(presetConfig.filters);element.style.mixBlendMode = presetConfig.blend;}setupControls() {const controls = document.createElement('div');controls.className = 'effect-controls';Object.keys(this.options.presets).forEach(preset => {const button = document.createElement('button');button.textContent = preset;button.onclick = () => this.applyPreset(preset);controls.appendChild(button);});document.body.appendChild(controls);}applyPreset(preset) {document.querySelectorAll('.effect-target').forEach(element => {this.applyEffect(element, preset);});}
}