您的位置:首页 » 分类: HTML+CSS & HTML5+CSS3 » 文章: 使用 CSS 实现图片的滤镜效果

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

小编推荐:掘金是一个面向程序员的高质量技术社区,从 一线大厂经验分享到前端开发最佳实践,无论是入门还是进阶,来掘金你不会错过前端开发的任何一个技术干货。

它如何工作的

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

这是用于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: 10px 20px 20px;
}
.preview img{
width: 100%;
vertical-align: top!important;
margin: 0!important;
visibility: hidden!important;
opacity: 0;
} 

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

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

Pencil(铅笔画效果)

See the Pen pencil(铅笔画效果) by feiwen8772 (@feiwen8772) on CodePen.0

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% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
filter: brightness(2) invert(1) grayscale(1);
box-shadow: inset 0 0 0 1px black;
}
}

Watercolor(水彩画效果)

See the Pen watercolor(水彩画效果) by feiwen8772 (@feiwen8772) on CodePen.dark

SCSS 转换后的 CSS:

.watercolor-effect {
background-image: url(photo.jpg);
background-size: cover;
background-position: center;
}
@supports (filter: blur(2px)) 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% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
filter: brightness(2) invert(1) grayscale(1);
box-shadow: inset 0 0 0 1px black;
}
.watercolor-effect:after {
background-image: url(photo.jpg);
background-position: center;
mix-blend-mode: multiply;
filter: brightness(1.3) blur(2px) contrast(2);
}
}

Emboss(浮雕画效果)

See the Pen Emboss(浮雕画效果) by feiwen8772 (@feiwen8772) on CodePen.dark

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% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px), center;
filter: brightness(2) invert(1) grayscale(1);
}
}

Colored Pencil(彩笔画效果)

See the Pen Colored Pencil(彩笔画效果) by feiwen8772 (@feiwen8772) on CodePen.dark

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 1px black;
}
.colored-pencil-effect:before {
background-image: url(photo.jpg), url(photo.jpg);
background-blend-mode: difference;
background-position: calc(50% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
filter: brightness(2) invert(1) grayscale(1);
}
.colored-pencil-effect:after {
background: inherit;
mix-blend-mode: color;
}
}

Chalkboard(粉笔画效果)

See the Pen Chalkboard(粉笔画效果) by feiwen8772 (@feiwen8772) on CodePen.dark

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% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px);
filter: brightness(1.5) grayscale(1);
}
}

Colored Chalkboard(彩色粉笔画效果)

See the Pen Colored Chalkboard(彩色粉笔画效果) by feiwen8772 (@feiwen8772) on CodePen.dark

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% - 1px) calc(50% - 1px), calc(50% + 1px) calc(50% + 1px), center;
background-blend-mode: color, difference;
filter: brightness(2);
}
}

Airbrush(喷绘效果)

See the Pen Airbrush(喷绘效果) by feiwen8772 (@feiwen8772) on CodePen.dark

SCSS 转换后的 CSS:

.airbrush-effect {
background-image: url(photo.jpg);
background-size: cover;
background-position: center;
}
@supports (filter: blur(5px) 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(5px) contrast(5);
mix-blend-mode: multiply;
}
}

Hallucination (幻影效果)

See the Pen Hallucination (幻影效果) by feiwen8772 (@feiwen8772) on CodePen.dark

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(法兰绒巾效果)

See the Pen Flannel(法兰绒巾效果) by feiwen8772 (@feiwen8772) on CodePen.dark

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) (缺墨打印效果-水平)

See the Pen Low Ink (horizontal) (缺墨打印效果-水平) by feiwen8772 (@feiwen8772) on CodePen.dark

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) (缺墨打印效果-垂直)

See the Pen Low Ink (vertical) (缺墨打印效果-垂直) by feiwen8772 (@feiwen8772) on CodePen.dark

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(拼贴画效果)

See the Pen Collage(拼贴画效果) by feiwen8772 (@feiwen8772) on CodePen.dark

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(马赛克效果)

See the Pen Mosaic(马赛克效果) by feiwen8772 (@feiwen8772) on CodePen.dark

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(照片框效果)

See the Pen Photo Border(照片框效果) by feiwen8772 (@feiwen8772) on CodePen.dark

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(红外线效果)

See the Pen Infrared(红外线效果) by feiwen8772 (@feiwen8772) on CodePen.dark

SCSS 转换后的 CSS:

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

Night Vision(红外夜视效果)

See the Pen Night Vision(红外夜视效果) by feiwen8772 (@feiwen8772) on CodePen.dark

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.5px, transparent 5px);
background-size: cover;
background-position: center;
background-blend-mode: overlay;
}

Warhol(Warhol效果)

See the Pen Warhol(Warhol效果) by feiwen8772 (@feiwen8772) on CodePen.dark

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, #14EBFF 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效果)

See the Pen Selective color(Selective color效果) by feiwen8772 (@feiwen8772) on CodePen.dark

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)(镜像效果-水平)

See the Pen Mirror (horizontal)(镜像效果-水平) by feiwen8772 (@feiwen8772) on CodePen.dark

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)(镜像效果-垂直)

See the Pen Mirror (vertical)(镜像效果-垂直) by feiwen8772 (@feiwen8772) on CodePen.dark

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

原文链接:Image Effects with CSS

2 条评论 - 关于 “使用 CSS 实现图片的滤镜效果

发表评论

电子邮件地址不会被公开。 必填项已用*标注