使用一个或多个较新的CSS属性(
,
- background-blend-mode
, 或者
- mix-blend-mode
)可以让我们惊艳地处理单个图片效果。
- filter
这是用于CSS图像效果演示的灯塔的图像,这是未编辑过的背景图像,后面我们使用 CSS 对其进行图像效果演示。
混合: 在大多数这些效果中,单个 background-image url 可以重复一次或多次使用,并使用CSS混合模式(multiply, overlay, screen, difference,等的)与其自身混合。
滤镜: 在其中的一些效果中,CSS
(滤镜) 属性被用于进一步精细化的输出。像
- filter
(灰度),
- grayscale()
(亮度), 和
- brightness()
(对比度) 这样的函数可以对图片效果进行调整,以便使你使用的图像获得更好的效果。 CSS Filter 具体效果可以查看这篇文章。
- contrast()
实现: 你可以在 CodePen 查看效果的实现,或向下滚动到实现部分。
改进: 这些效果可以被进一步增强,你可以自己尝试一下。
可靠性: 默认情况下,原图显示无任何影响。当 CSS @supports 检测到支持所需的 CSS 属性和效果值时,那么效果将被启用。这是一个相当精确的,本地的和轻量级的功能检测。
下载: 这些效果的完整 CSS 库可以下载,未压缩版(12.8kb)或 压缩版(8.7kb)。使用 gzip 压缩后,整个图像效果库小于1300字节。
GitHub:该项目可在 GitHub 上获得。
在每个 CSS / SCSS 片段中,将
替换为你自己使用的图片URL。
- photo.jpg
- <div class="preview pencil-effect">
- <img src="http://www.css88.com/book/image-effects/photo.jpg" alt="Image of lighthouse" />
- </div>
在这个实现中, 标签只是用作占位符,示例中使用 CSS 的
是为了为效果设置正确的宽高比,例如示例辅助的 CSS:
- visibility: hidden;
- .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 中尝试这些效果。
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;
- }
- }
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);
- }
- }
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);
- }
- }
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;
- }
- }
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);
- }
- }
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);
- }
- }
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;
- }
- }
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;
- }
- }
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;
- }
- }
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;
- }
- }
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;
- }
- }
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;
- }
- }
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;
- }
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;
- }
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);
- }
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;
- }
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;
- }
- }
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);
- }
- }
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;
- }
- }
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;
- }
- }
来源: http://www.css88.com/archives/8259