欢迎光临杨雨的葡京赌场站!

杨雨个人网站-杨雨葡京赌场-杨照佳

杨雨葡京赌场网站

关注互联网和搜索引擎的葡京赌场网站

首页 > WEB开发 > html5案例分享 >

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

发布时间:2017-12-07  编辑:杨雨葡京赌场网站   点击:   

小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货。各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握..

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

使用 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> <img src="http://www.Css88.com/book/image-effects/photo.jpg" alt="Image of lighthouse" /> </div>

在这个实现中,

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

标签只是用作占位符,示例中使用 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

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)

原文链接:Image Effects with CSS

本文地址:http://itbyc.com/web/html5/18611.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1