毛瑞

毛瑞 查看完整档案

北京编辑北京师范大学  |  计算机应用技术 编辑三十课  |  软件工程师 编辑 30ke.cn 编辑
编辑

网站:30ke.cn
小程序:诗词大挑战,成语接龙挑战,数独之星

编程,学习,分享,记录生活的点点滴滴,保持热情42度。

echo "Hi U,"
printf("在编程的路上")
console.log("有你有我")
System.out.println("一起加油!")

个人动态

毛瑞 发布了文章 · 2019-09-19

用CSS新属性实现特殊的图片显示效果

1 概述

1.1 前言

使用一个或多个图像相关的CSS属性(background-blend-mode, mix-blend-mode, or filter)可以实现许多特殊的图片显示效果。本文转载自Bennett Feely的个人网站,文中共列举了20种图片显示效果。

详细代码及英文原文请访问Bennett Feely的主页

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;
        }
    }
}

查看示例程序

3 结尾

3.1 结语

详细代码及英文原文请访问Bennett Feely的主页

本文转载自Bennett Feely的个人网站,只做学习和交流使用。

查看原文

赞 79 收藏 57 评论 4

毛瑞 分享了头条 · 2019-05-09

在工程中经常会用到各种小图标,与其引入图标库或下载图片,自己绘制SVG也是不错的选择。可缩放矢量图(SVG)的优点这里就不做叙述了,但真的是时候好好学习一下神奇的 SVG 了。 让我们一起马上开始神奇的 SVG 学习之旅吧!

赞 2 收藏 6 评论 0

毛瑞 分享了头条 · 2019-05-06

在平时开发过程中,总是记不住DOM操作相关的方法和属性,因此特别整理了本文内容。包括元素查询、结构遍历、属性及内容操作、创建节点、插入节点及删除节点等内容。 虽然JQuery更便利,但我还是喜欢用原生的API。

赞 6 收藏 12 评论 0

毛瑞 分享了头条 · 2019-04-30

本文列举了Hex,Hsl,Rgb,命名颜色及WEB安全色等几大分类的颜色列表,并给出了颜色编辑、WEB页面颜色测试、配套颜色方案等相关内容。网页设计师必不可少辅助工具。 做页面时,总是不知道怎么选择颜色,现做了个小工具和大家分享!! 颜色太多,看时间长了容易眼花!...

赞 0 收藏 5 评论 0

毛瑞 分享了头条 · 2019-04-26

JavaScript数组方法速查手册极简版中共收了32个数组的常用方法和属性,并根据方法的用途进行重新排序和分类,在文中有简要的方法使用介绍和用例说明。收藏备用吧! 总是记不住这么多数组方法,写个流水帐记录一下吧!! 文中介绍的过于简单,想更更多理解相关内容还...

赞 3 收藏 14 评论 0

毛瑞 分享了头条 · 2019-04-24

目前收集整理了21个常用的javaScript正则表达式,其中包括用户名、密码强度、整数、数字、电子邮件地址(Email)、手机号码、身份证号、URL地址、 IP地址、 十六进制颜色、 日期、 微信号、车牌号、中文正则等。表单验证处理必备,赶紧收藏吧! 还会陆续加入新的正则...

赞 4 收藏 29 评论 2

毛瑞 分享了头条 · 2019-04-23

本文中汇编了一些常用的CSS WEB组件,为方便以后使用特做成了一个流水记录单。以后再喜欢的、简捷美观的组件,还会陆续加入进来,希望能集齐100个吧!总是喜欢简单又精致的东西,美得不繁复也不张扬。这许这就是闷骚程序员的癖好吧!闲来无事,把收集到的部分WEB组件...

赞 2 收藏 15 评论 0

毛瑞 分享了头条 · 2019-04-19

在项目开发中,有时会用到行业相关数据。本文整理了国标GB/T 4754--2017中的数据,其中包括门类、大类、中类、小类共四级,并提供JSON格式数据供程序员下载使用。

赞 0 收藏 1 评论 0

毛瑞 分享了头条 · 2019-04-18

在项目开发中,有时会用到国家与地区相关数据。现收集整理了233个国家和地区的基本数据,包括中英文简称、数字和字母编码、人口及面积等属性。同时提供了JSON数据方便供程序员下载使用。

赞 5 收藏 5 评论 1

毛瑞 分享了头条 · 2019-04-17

在项目开发中,有时会用到中国大学相关数据。现将2017年教育部公开的普通高等学校及成人高等学校数据做成了JSON格式供程序员下载使用。如有数据缺失或不一致,以教育部数据为准。

赞 2 收藏 1 评论 0

认证与成就

  • 获得 636 次点赞
  • 获得 7 枚徽章 获得 0 枚金徽章, 获得 2 枚银徽章, 获得 5 枚铜徽章

擅长技能
编辑

开源项目 & 著作
编辑

注册于 2017-05-15
个人主页被 7.3k 人浏览