使用 CSS 实现图片的滤镜效果

它如何工作的

使用一个或多个较新的CSS属性(background-blend-mode, mix-blend-mode, 或者 filter)可以让我们惊艳地处理单个图片效果。

使用 CSS 实现图片的滤镜效果

这是用于CSS图像效果演示的灯塔的图像,这是未编辑过的背景图像,后面我们使用 CSS 对其进行图像效果演示。

混合: 在大多数这些效果中,单个 background-image url 可以重复一次或多次使用,并使用CSS混合模式(multiply, overlay, screen, difference,等的)与其自身混合。

滤镜: 在其中的一些效果中,CSS filter(滤镜) 属性被用于进一步精细化的输出。像 grayscale()(灰度), brightness()(亮度), 和 contrast()(对比度) 这样的函数可以对图片效果进行调整,以便使你使用的图像获得更好的效果。 CSS Filter 具体效果可以查看这篇文章

实现: 你可以在 CodePen 查看效果的实现,或向下滚动到实现部分。

改进: 这些效果可以被进一步增强,你可以自己尝试一下。

可靠性: 默认情况下,原图显示无任何影响。当 CSS @supports 检测到支持所需的 CSS 属性和效果值时,那么效果将被启用。这是一个相当精确的,本地的和轻量级的功能检测。

下载: 这些效果的完整 CSS 库可以下载,未压缩版(12.8kb)或 压缩版(8.7kb)。使用 gzip 压缩后,整个图像效果库小于1300字节。

GitHub:该项目可在 GitHub 上获得。

实现

在每个 CSS / SCSS 片段中,将 photo.jpg 替换为你自己使用的图片URL。

示例HTML

<div class="preview pencil-effect">
<img src="http://www.css88.com/book/image-effects/photo.jpg" alt="Image of lighthouse" />
</div>

在这个实现中, 标签只是用作占位符,示例中使用 CSS 的 visibility: hidden; 是为了为效果设置正确的宽高比,例如示例辅助的 CSS:

.preview {
 margin: 10 px 20 px 20 px;
}
.preview img {
 width: 100 % ;
 vertical - align: top!important;
 margin: 0!important;
 visibility: hidden!important;
 opacity: 0;
}

实际使用时建议设置 widthheightalt 属性值。

示例中使用的 SCSS ,你可以将其转化为 CSS 。你也可以在 CodePen 中尝试这些效果。

Pencil(铅笔画效果)

SCSS 转换后的 CSS:

.pencil - effect {
 background - image: url(photo.jpg);
 background - size: cover;
 background - position: center;
} 
@supports(filter: invert(1)) and(background - blend - mode: difference) {
 .pencil - effect {
 background - image: url(photo.jpg), url(photo.jpg);
 background - blend - mode: difference;
 background - position: calc(50 % -1 px) calc(50 % -1 px), calc(50 % +1 px) calc(50 % +1 px);
 filter: brightness(2) invert(1) grayscale(1);
 box - shadow: inset 0 0 0 1 px black;
 }
}

Watercolor(水彩画效果)

SCSS 转换后的 CSS:

.watercolor - effect {
 background - image: url(photo.jpg);
 background - size: cover;
 background - position: center;
} 
@supports(filter: blur(2 px)) and(mix - blend - mode: multiply) {
 .watercolor - effect {
 position: relative;
 overflow: hidden;
 }
 .watercolor - effect: before, .watercolor - effect: after {
 display: block;
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background - size: cover;
 }
 .watercolor - effect: before {
 background - image: url(photo.jpg), url(photo.jpg);
 background - blend - mode: difference;
 background - position: calc(50 % -1 px) calc(50 % -1 px), calc(50 % +1 px) calc(50 % +1 px);
 filter: brightness(2) invert(1) grayscale(1);
 box - shadow: inset 0 0 0 1 px black;
 }
 .watercolor - effect: after {
 background - image: url(photo.jpg);
 background - position: center;
 mix - blend - mode: multiply;
 filter: brightness(1.3) blur(2 px) contrast(2);
 }
}

Emboss(浮雕画效果)

SCSS 转换后的 CSS:

.emboss - effect {
 background - image: url(photo.jpg);
 background - size: cover;
 background - position: center;
} 
@supports(filter: invert(1)) and(background - blend - mode: difference, screen) {
 .emboss - effect {
 background - image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
 background - blend - mode: difference, screen;
 background - position: calc(50 % -1 px) calc(50 % -1 px), calc(50 % +1 px) calc(50 % +1 px), center;
 filter: brightness(2) invert(1) grayscale(1);
 }
}

Colored Pencil(彩笔画效果)

SCSS 转换后的 CSS:

.colored - pencil - effect {
 background - image: url(photo.jpg);
 background - size: cover;
 background - position: center;
} 
@supports(filter: invert(1)) and(mix - blend - mode: color) {
 .colored - pencil - effect {
 position: relative;
 }
 .colored - pencil - effect: before, .colored - pencil - effect: after {
 display: block;
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background - size: cover;
 box - shadow: inset 0 0 0 1 px black;
 }
 .colored - pencil - effect: before {
 background - image: url(photo.jpg), url(photo.jpg);
 background - blend - mode: difference;
 background - position: calc(50 % -1 px) calc(50 % -1 px), calc(50 % +1 px) calc(50 % +1 px);
 filter: brightness(2) invert(1) grayscale(1);
 }
 .colored - pencil - effect: after {
 background: inherit;
 mix - blend - mode: color;
 }
}

Chalkboard(粉笔画效果)

SCSS 转换后的 CSS:

.chalkboard - effect {
 background - image: url(photo.jpg);
 background - size: cover;
 background - position: center;
} 
@supports(filter: grayscale(1)) and(background - blend - mode: difference) {
 .chalkboard - effect {
 background - image: url(photo.jpg), url(photo.jpg);
 background - blend - mode: difference;
 background - position: calc(50 % -1 px) calc(50 % -1 px), calc(50 % +1 px) calc(50 % +1 px);
 filter: brightness(1.5) grayscale(1);
 }
}

Colored Chalkboard(彩色粉笔画效果)

SCSS 转换后的 CSS:

.colored - chalkboard - effect {
 background - image: url(photo.jpg);
 background - size: cover;
 background - position: center;
} 
@supports(filter: brightness(2)) and(background - blend - mode: color, difference) {
 .colored - chalkboard - effect {
 background - image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
 background - size: cover;
 background - position: calc(50 % -1 px) calc(50 % -1 px), calc(50 % +1 px) calc(50 % +1 px), center;
 background - blend - mode: color, difference;
 filter: brightness(2);
 }
}

Airbrush(喷绘效果)

SCSS 转换后的 CSS:

.airbrush - effect {
 background - image: url(photo.jpg);
 background - size: cover;
 background - position: center;
} 
@supports(filter: blur(5 px) contrast(5)) and(mix - blend - mode: multiply) {
 .airbrush - effect {
 position: relative;
 overflow: hidden;
 }
 .airbrush - effect: after {
 display: block;
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: inherit;
 filter: brightness(1.5) saturate(100) blur(5 px) contrast(5);
 mix - blend - mode: multiply;
 }
}

Hallucination (幻影效果)

SCSS 转换后的 CSS:

.hallucination - effect {
 background - image: url(photo.jpg);
 background - size: cover;
 background - position: center;
} 
@supports(mix - blend - mode: multiply) {
 .hallucination - effect {
 position: relative;
 overflow: hidden;
 background - color: magenta;
 background - blend - mode: screen;
 }
 .hallucination - effect: before, .hallucination - effect: after {
 display: block;
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: inherit;
 mix - blend - mode: multiply;
 transform: scale(1.05);
 }
 .hallucination - effect: before {
 background - color: yellow;
 background - blend - mode: screen;
 transform - origin: top left;
 }
 .hallucination - effect: after {
 background - color: cyan;
 background - blend - mode: screen;
 transform - origin: bottom right;
 }
}

Flannel(法兰绒巾效果)

SCSS 转换后的 CSS:

.flannel - effect {
 background - image: url(photo.jpg);
 background - size: cover;
 background - position: center;
} 
@supports(background - blend - mode: overlay) {
 .flannel - effect {
 background - image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
 background - position: center;
 background - size: 100 % , 100000 % 100 % , 100 % 100000 % ;
 background - blend - mode: overlay;
 }
}

Low Ink (horizontal) (缺墨打印效果-水平)

SCSS 转换后的 CSS:

.low - ink - x - effect {
 background - image: url(photo.jpg);
 background - size: cover;
 background - position: center;
} 
@supports(background - blend - mode: screen, overlay) {
 .low - ink - x - effect {
 background - image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
 background - size: 100 % 100 % , 10000 % 100 % ;
 background - blend - mode: screen, overlay;
 }
}

Low Ink (vertical) (缺墨打印效果-垂直)

SCSS 转换后的 CSS:

.low - ink - y - effect {
 background - image: url(photo.jpg);
 background - size: cover;
 background - position: center;
} 
@supports(background - blend - mode: screen, overlay) {
 .low - ink - y - effect {
 background - image: url(photo.jpg), url(photo.jpg), url(photo.jpg);
 background - size: 100 % 100 % , 100 % 1000 % ;
 background - blend - mode: screen, overlay;
 }
}

Collage(拼贴画效果)

SCSS 转换后的 CSS:

.collage - effect {
 background - image: url(photo.jpg);
 background - size: cover;
 background - position: center;
} 
@supports(background - blend - mode: overlay) {
 .collage - effect {
 background - image: url(photo.jpg), url(photo.jpg), url(photo.jpg), url(photo.jpg), url(photo.jpg), url(photo.jpg);
 background - size: 200 % , 80 % , 60 % , 50 % , 40 % , 100 % ;
 background - position: 50 % , 80 % , 30 % , 0;
 background - blend - mode: overlay;
 background - repeat: no - repeat;
 }
}

Mosaic(马赛克效果)

SCSS 转换后的 CSS:

.mosaic - effect {
 background - image: url(photo.jpg), url(photo.jpg);
 background - size: cover, 5 % 5 % ;
 background - position: center;
 background - blend - mode: overlay;
}

Photo Border(照片框效果)

SCSS 转换后的 CSS:

.photo - border - effect {
 background - image: url(photo.jpg), url(photo.jpg);
 background - position: center;
 background - size: 60 % , 20 % ;
 background - repeat: no - repeat, repeat;
}

Infrared(红外线效果)

SCSS 转换后的 CSS:

.infrared - effect {
 background - image: url(photo.jpg);
 background - size: cover;
 background - position: center;
 filter: hue - rotate(180 deg) saturate(2);
}

Night Vision(红外夜视效果)

SCSS 转换后的 CSS:

.night - vision - effect {
 background - image: url(photo.jpg), radial - gradient(#0F0, # 000), repeating - linear - gradient(transparent 0, rgba(0, 0, 0, 0.1) 2.5 px, transparent 5 px);
 background - size: cover;
 background - position: center;
 background - blend - mode: overlay;
}

Warhol(Warhol效果)

SCSS 转换后的 CSS:

.warhol - effect {
 background - image: url(photo.jpg);
 background - size: cover;
 background - position: center;
} 
@supports(background - blend - mode: color) {
 .warhol - effect {
 background - image: linear - gradient(#14EBFF 0, # 14E BFF 50 % , #FFFF70 50 % , #FFFF70 100 % ), linear - gradient(#FF85DA 0, #FF85DA 50 % , #AAA 50 % , #AAA 100 % ), url(photo.jpg);
 background - size: 50 % 100 % , 50 % 100 % , 50 % 50 % ;
 background - position: top left, top right;
 background - repeat: no - repeat, no - repeat, repeat;
 background - blend - mode: color;
 }
}

Selective color(Selective color效果)

SCSS 转换后的 CSS:

.selective - color - effect {
 background - image: url(photo.jpg);
 background - size: cover;
 background - position: center;
} 
@supports(filter: brightness(3)) and(mix - blend - mode: color) {
 .selective - color - effect {
 position: relative;
 }
 .selective - color - effect: before, .selective - color - effect: after {
 display: block;
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 background: inherit;
 background - color: red;
 background - blend - mode: screen;
 mix - blend - mode: color;
 filter: brightness(3);
 }
}

Mirror (horizontal)(镜像效果-水平)

SCSS 转换后的 CSS:

.mirror - x - effect {
 background - image: url(photo.jpg);
 background - size: cover;
 background - position: center;
} 
@supports(transform: scaleX(-1)) {
 .mirror - x - effect {
 position: relative;
 }
 .mirror - x - effect: before, .mirror - x - effect: after {
 display: block;
 content: "";
 position: absolute;
 top: 0;
 bottom: 0;
 background: inherit;
 }
 .mirror - x - effect: before {
 left: 0;
 right: 50 % ;
 transform: scaleX(-1);
 }
 .mirror - x - effect: after {
 left: 50 % ;
 right: 0;
 }
}

Mirror (vertical)(镜像效果-垂直)

SCSS 转换后的 CSS:

.mirror - y - effect {
 background - image: url(photo.jpg);
 background - size: cover;
 background - position: center;
} 
@supports(transform: scaleY(-1)) {
 .mirror - y - effect {
 position: relative;
 }
 .mirror - y - effect: before, .mirror - y - effect: after {
 display: block;
 content: "";
 position: absolute;
 left: 0;
 right: 0;
 background: inherit;
 }
 .mirror - y - effect: before {
 top: 0;
 bottom: 50 % ;
 transform: scaleY(-1);
 }
 .mirror - y - effect: after {
 top: 50 % ;
 bottom: 0;
 }
}

更多相关有趣的CSS

原文链接:https://bennettfeely.com/image-effects/

发表评论

登录后才能评论