它如何工作的
使用一个或多个较新的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="https://www.html.cn/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 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
- CSSgram: Instagram filters recreated with CSS filters and blend modes – by Una Kravets
- Basics of CSS Blend Modes – by Chris Coyier
- – Una Kravets’ 6-part CSS image effects series
- Blending Modes Demystified – by Justin McDowell
- CSS3 Patterns Gallery – by Lea Verou
- New CSS gradient possibilities with the background-blend-mode property – by Bennett Feely
- CSS Filters Playground – by Bennett Feely (2013)
- CSS Blend Modes could be the next big thing in Web Design – by Bennett Feely (2013)
真厉害啊,收藏了
可以做 web 版的 photoshop 了