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

2017-10-23 分类：HTML+CSS / HTML5+CSS3 阅读(14104) 评论(2)
10年服务1亿Tian开发工程师

它如何工作的

使用一个或多个较新的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）。使用 压缩后，整个图像效果库小于1300字节。

GitHub：该项目可在 上获得。

实现

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

示例HTML

<div class="preview pencil-effect">
  <img src="https://www.7psus5.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;
}

实际使用时建议设置 width，height 和 alt 属性值。

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

Pencil（铅笔画效果）

See the Pen by feiwen8772 () on .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 by feiwen8772 () on .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 by feiwen8772 () on .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 by feiwen8772 () on .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 by feiwen8772 () on .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 by feiwen8772 () on .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 by feiwen8772 () on .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 by feiwen8772 () on .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 by feiwen8772 () on .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 by feiwen8772 () on .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 by feiwen8772 () on .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 by feiwen8772 () on .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 by feiwen8772 () on .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 by feiwen8772 () on .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 by feiwen8772 () on .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 by feiwen8772 () on .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 by feiwen8772 () on .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 by feiwen8772 () on .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 by feiwen8772 () on .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 by feiwen8772 () on .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

原文链接：

赞(2) 打赏
未经允许不得转载：WEBTian开发 » 使用 CSS 实现图片的滤镜效果
标签：

相关推荐

评论 2

取消

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #-49

    真厉害啊,收藏了

    wwdyy1年前 (2017-10-25)回复
  2. #-48

    可以做 web 版的 photoshop 了

    osimly1年前 (2017-10-27)回复

置顶推荐

最近文章

热门标签

JavaScript (324)ES6 (222)代码片段 (188)实用代码 (182)jquery (61)css3 (54)css (48)ES2015 (28)jQuery插件 (26)React (26)Tian招聘 (25)Tian开发工具 (24)webpack (23)招聘 (20)npm (20)Babel (20)箭头函数 (19)Map (19)ES7 (18)Web Development (17)let (16)Chrome DevTools (16)async (16)IE6 BUG (15)Tian开发 (15)Promise (14)const (14)ES2017 (14)Flexbox (14)Sass (14)

最新评论

分类目录

热门文章

Tian开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏