CSS制作图片滤镜效果-创新互联

本篇文章展示了CSS制作图片滤镜效果具体操作，代码简明扼要容易理解，绝对能让你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

创新互联公司坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都做网站、成都网站制作、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的正定网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

1 概述

1.1 前言

使用一个或多个图像相关的CSS属性（background-blend-mode, mix-blend-mode, or filter）可以实现许多特殊的图片显示效果，共列举了20种图片显示效果。

2 效果列表

2.1 铅笔画效果

效果示例

SCSS代码

.pencil-effect {
   $url : url(photo.jpg);
   background-image: $url;
   background-size: cover;
   background-position: center;
   @supports (filter: invert(1)) and (background-blend-mode: difference) {
     background-image: $url, $url;
     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;
   }
}

2.2 水彩效果

效果示例

SCSS代码

.watercolor-effect {
   $url : url(photo.jpg);
   background-image: $url;
   background-size: cover;
   background-position: center;
   @supports (filter: blur(2px)) and (mix-blend-mode: multiply) {
     position: relative;
     overflow: hidden;
     &:before, &:after {
       display: block;
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       background-size: cover;
     }
     &:before {
       background-image: $url, $url;
       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;
     }
     &:after {
       background-image: $url;
       background-position: center;
       mix-blend-mode: multiply;
       filter: brightness(1.3) blur(2px) contrast(2);
     }
   }
}

2.3 浮雕效果

效果示例

SCSS代码

.emboss-effect {
   $url : url(photo.jpg);
   background-image: $url;
   background-size: cover;
   background-position: center;
   @supports (filter: invert(1)) and (background-blend-mode: difference, screen) {
     background-image: $url, $url, $url;
     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);
   }
}

2.4 彩铅效果

效果示例

SCSS代码

.colored-pencil-effect {
   $url : url(photo.jpg);
   background-image: $url;
   background-size: cover;
   background-position: center;
   @supports (filter: invert(1)) and (mix-blend-mode: color) {
     position: relative;
     &:before,
     &: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;
     }
     &:before {
       background-image: $url, $url;
       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);
     }
     &:after {
       background: inherit;
       mix-blend-mode: color;
     }
   }
}

2.5 黑板效果

效果示例

SCSS代码

.chalkboard-effect {
   $url : url(photo.jpg);
   background-image: $url;
   background-size: cover;
   background-position: center;
   @supports (filter: grayscale(1)) and (background-blend-mode: difference) {
     background-image: $url, $url;
     background-blend-mode: difference;
     background-position:
       calc(50% - 1px) calc(50% - 1px),
       calc(50% + 1px) calc(50% + 1px);
     filter: brightness(1.5) grayscale(1);
   }
}

2.6 彩色黑板效果

效果示例

SCSS代码

.colored-chalkboard-effect {
   $url : url(photo.jpg);
   background-image: $url;
   background-size: cover;
   background-position: center;
   @supports (filter: brightness(2)) and (background-blend-mode: color, difference) {
     background-image: $url, $url, $url;
     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);
   }
}

2.7 喷枪效果

效果示例

SCSS代码

.airbrush-effect {
  $url : url(photo.jpg);
  background-image: $url;
   background-size: cover;
   background-position: center;
  @supports (filter: blur(5px) contrast(5)) and (mix-blend-mode: multiply) {
     position: relative;
     overflow: hidden;
     &: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;
     }
   }
}

2.8 绚烂效果

效果示例

SCSS代码

.hallucination-effect {
  $url : url(photo.jpg);
  $offset : 5px;
  background-image: $url;
  background-size: cover;
  background-position: center;
  @supports (mix-blend-mode: multiply) {
   position: relative;
   overflow: hidden;
   background-color: magenta;
   background-blend-mode: screen;
   &:before, &:after {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: inherit;
    mix-blend-mode: multiply;
    transform: scale(1.05);
   }
   &:before {
    background-color: yellow;
    background-blend-mode: screen;
    transform-origin: top left;
   }
   &:after {
    background-color: cyan;
    background-blend-mode: screen;
    transform-origin: bottom right;
   }
  }
}

2.9 绒布效果

效果示例

SCSS代码

.flannel-effect {
   $url : url(photo.jpg);
   background-image: $url;
   background-size: cover;
   background-position: center;
   @supports (background-blend-mode: overlay) {
     background-image: $url, $url, $url;
    background-position: center;
    background-size: 100%, 100000% 100%, 100% 100000%;
    background-blend-mode: overlay;
   }
}

2.10 水平低墨

效果示例

SCSS代码

.low-ink-x-effect {
   $url : url(photo.jpg);
   background-image: $url;
   background-size: cover;
   background-position: center;
   @supports (background-blend-mode: screen, overlay) {
     background-image:   $url, $url, $url;
     background-size: 100% 100%, 10000% 100%;
     background-blend-mode: screen, overlay;
   }
}

2.11 垂直低墨效果

效果示例

SCSS代码

.low-ink-y-effect {
   $url : url(photo.jpg);
   background-image: $url;
   background-size: cover;
   background-position: center;
   @supports (background-blend-mode: screen, overlay) {
     background-image:   $url, $url, $url;
     background-size: 100% 100%, 100% 1000%;
     background-blend-mode: screen, overlay;
   }
}

2.12 拼贴效果

效果示例

SCSS代码

.collage-effect {
   $url : url(photo.jpg);
   background-image: $url;
   background-size: cover;
   background-position: center;
   @supports (background-blend-mode: overlay) {
     background-image: $url, $url, $url, $url, $url, $url;
     background-size: 200%, 80%, 60%, 50%, 40%, 100%;
     background-position: 50%, 80%, 30%, 0;
     background-blend-mode: overlay;
     background-repeat: no-repeat;
   }
}

2.13 马赛克效果

效果示例

SCSS代码

.mosaic-effect {
   $url : url(photo.jpg);
   background-image: $url, $url;
   background-size: cover, 5% 5%;
   background-position: center;
  background-blend-mode: overlay;
}

2.14 图片边框效果

效果示例

SCSS代码

.photo-border-effect {
  $url : url(photo.jpg);
  background-image: $url, $url;
  background-position: center;
  background-size: 60%, 20%;
  background-repeat: no-repeat, repeat;
}

2.15 红外效果

效果示例

SCSS代码

.infrared-effect {
  $url : url(photo.jpg);
  background-image: $url;
  background-size: cover;
  background-position: center;
  filter: hue-rotate(180deg) saturate(2);
}

2.16 夜视效果

效果示例

SCSS代码

.night-vision-effect {
  $url : url(photo.jpg);
  $line-width: 5px;
  background-image:
   $url , radial-gradient(
    #0F0,
    #000
   ),
   repeating-linear-gradient(
    transparent 0,
    rgba(0,0,0,0.1) $line-width/2,
    transparent $line-width
   );
  background-size: cover;
  background-position: center;
  background-blend-mode: overlay;
}

2.17 沃霍尔效果

效果示例

SCSS代码

.warhol-effect {
  $url : url(photo.jpg);
  background-image: $url;
   background-size: cover;
   background-position: center;
  @supports (background-blend-mode: color) {
     background-image:
     linear-gradient(
      #14EBFF 0,
      #14EBFF 50%,
      #FFFF70 50%,
      #FFFF70 100%
     ),
     linear-gradient(
      #FF85DA 0,
      #FF85DA 50%,
      #AAA 50%,
      #AAA 100%
     ),
     $url;
     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;
   }
}

2.18 颜色校正效果

效果示例

SCSS代码

.selective-color-effect {
  $url : url(photo.jpg);
  background-image: $url;
  background-size: cover;
  background-position: center;
  @supports (filter: brightness(3)) and (mix-blend-mode: color) {
   position: relative;
   &:before, &: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);
   }
  }
}

2.19 水平镜像效果

效果示例

SCSS代码

.mirror-x-effect {
   $url : url(photo.jpg);
   background-image: $url;
   background-size: cover;
   background-position: center;
   @supports (transform: scaleX(-1)) {
     position: relative;
     &:before, &:after {
       display: block;
       content: "";
       position: absolute;
       top: 0;
       bottom: 0;
       background: inherit;
     }
     &:before {
       left: 0;
       right: 50%;
       transform: scaleX(-1);
     }
     &:after {
       left: 50%;
       right: 0;
     }
   }
}

2.20 垂直镜像效果

效果示例

SCSS代码

.mirror-y-effect {
$url : url(photo.jpg);
   background-image: $url;
   background-size: cover;
   background-position: center;
   @supports (transform: scaleY(-1)) {
     position: relative;
     &:before, &:after {
       display: block;
       content: "";
       position: absolute;
       left: 0;
       right: 0;
       background: inherit;
     }
     &:before {
       top: 0;
       bottom: 50%;
       transform: scaleY(-1);
     }
     &:after {
       top: 50%;
       bottom: 0;
     }
   }
}

看完这篇文章，你们学会使用CSS制作图片滤镜效果了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读。

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

网页名称：CSS制作图片滤镜效果-创新互联
网站链接：http://mswzjz.cn/article/csheoi.html