它如何工作的

使用一个或多个较新的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

在这个实现中，

标签只是用作占位符，示例中使用 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 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(彩笔画效果)

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(彩色粉笔画效果)

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 (幻影效果)

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

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

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

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

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效果)

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

html的图片滤镜效果,使用 CSS 实现图片的滤镜效果相关推荐

  1. html悬浮的图片居中,HTML/CSS：图片居中(水平居中和垂直居中)

    css图片水平居中 1.利用margin: 0 auto实现图片水平居中 利用margin: 0 auto实现图片居中就是在图片上加上css样式margin: 0 auto 如下: 2.利用文本的水平 ...

  2. css图片过大,CSS解决图片过大撑破DIV的方法

    一.防止图片撑破DIV方法一 原始处理方法是将要展示的图片进行处理.比如你的DIV宽度为500px(像素),那你上传的图片或放入网页的图片宽度就要小于500px,也就是你图片需要图片软件剪切.等比例缩 ...

  3. html文字图片同一行,CSS控制图片和文字在同一行显示且对齐的3种方法

    CSS控制图片和文字在同一行显示且对齐的3种方法 在 HTML 代码中,有时会需要在文字旁边加上一个图标. 默认情况,是图片置顶对齐,文字置底对齐,所以通常图片高,文字低,不能水平居中对齐. 常见欢思 ...

  4. html中图片太大了,css背景图片太大的坏处与解决方法

    在制作网页的过程中,有时候我们为了页面的个性.漂亮,会给通过CSS给网页设置一个很大的背景图片,可是背景图片太大的话不但会给我们的访客带来一些烦恼,还会对搜索引擎不友好,导致排名的降低,实在是得不偿失 ...

  5. html背景图片的隐藏,CSS隐藏图片背景上方的文字内容

    使用CSS样式隐藏图片作为背景图片上方的文字内容 此类问题我们常见于LOGO处使用,我们想让图片作为背景,而图片上方放A链接文字内容,但html锚文本功能仍然正常也能鼠标点击使用. 一.用到的CSS单 ...

  6. html 设置图片左对齐,CSS设置图片的对齐

    CSS设置图片的对齐 横向对齐方式 图片的水平对齐方式和文字的水平对齐方式基本相同,分别是左.中.右三种方式,不同的是,图片的水平对齐通常不能直接通过设置图片的text-align属性设置,而是,通过 ...

  7. html如何让文字图片同高,css里图片和文字如何等高

    css里设置图片和文字等高的方法:1.添加css属性"vertical-align:middle;":2.将图片和文字分别套上一个div,然后利用margin属性实现图片和文字等高 ...

  8. html删除图片效果,html+css实现图片右上角加删除叉、图片删除按钮

    这篇文章主要介绍了html+css 实现图片右上角加删除叉.图片删除按钮,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下 为了纪录下,以后可能用到 ...

  9. html5如何将图片堆叠代码,css实现图片堆叠效果的方法介绍

    css实现图片堆叠效果的方法介绍 发布时间:2020-04-03 13:49:30 来源:亿速云 阅读:51 作者:小新 今天小编给大家分享的是css实现图片堆叠效果的方法介绍,很多人都不太了解,今天 ...

  10. html实现图片切割,利用CSS切割图片技术来动态显示图片

    利用CSS切割图片来切换图片 .img2 { position:absolute; clip:rect(0px 20px 20px 0px); } .img1 { position:absolute; ...

最新文章

  1. 写给云栖社区在做网站的朋友一点干货
  2. 想获得50亿专项激励？关于穿山甲新星助推计划你必须了解的几件事
  3. GSMA公布2016年亚洲移动大奖提名名单
  4. 支付宝支付 第三集：搭建项目及测试（含代码）
  5. puppet-dashboard 安装（草稿）
  6. mysql服务等待应答超时_MySQL-Communications link failure异常分析及解决方法
  7. bzoj1412[ZJOI2009]狼和羊的故事
  8. outlook 发送邮件！
  9. 换根dp求树所有节点的最小深度
  10. 倍福嵌入式控制器PLC各型号简介
  11. Django在根据models生成数据库表时报 __init__() missing 1 required positional argument 'on_d...
  12. 长沙学院计算机系课程表,长沙交通学院研究生200—200学年度第学期课程表.doc...
  13. Python+matplotlib绘制散点图模拟心型图案
  14. 用程序去掉文件和文件夹的只读属性
  15. Display yuv formatted video by shader
  16. 网页脚本基本java语法_JSP学习（一）JSP基础语法
  17. java hex2bin_hex2bin / bin2hex / pack / unpack 的理解及应用
  18. Windows勒索病毒防范、解决方法全攻略
  19. Android集成华为Push及注意事项
  20. 电话交换机原理（企业运用方案）

热门文章

  1. 手机解锁方法：8个顶级的 Android 手机解锁软件
  2. Wise Owl Says… by Brian O'Kane
  3. 交换机、光纤收发器+光纤终端盒、接线端子的通俗理解
  4. 各种ADSL路由器端口映射设置
  5. 避免回调地狱的解决方案 async/await：用同步的方式去写异步代码
  6. 深入研读“ReDet: A Rotation-equivariant Detector for Aerial Object Detection”学习笔记
  7. linux 文件系统简析
  8. 业务应用系统运维服务
  9. Python 搜索、排序、复杂度分析
  10. 前端面试题个人汇总(精简知识要点 总结话术) / 前端小知识 保持学习 (年终奖年终奖 心心念念年终奖)