用CSS新属性实现特殊的图片显示效果-阿里云开发者社区

开发者社区> 毛瑞> 正文

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

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

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的个人网站,只做学习和交流使用。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
总结CSS3新特性(Animation篇)
动画(Animation),是CSS3的亮点.//之一 通过animation属性指定@keyframe来完成关键帧动画; @keyframe用法:   @keyframes name { 0% { top: 0; }/*0%可用from关键字替代*/ 50% { top: 1...
874 0
总结CSS3新特性(Transition篇)
CSS 过渡(transition), 是 CSS3 规范的一部分, 用来控制 CSS 属性的变化速率。 可以让属性的变化过程持续一段时间,而不是立即生效。比如,将元素的颜色从白色改为黑色,通常这个改变是立即生效的,使用 transition 后,将按一个曲线速率变化。
705 0
巧用CSS3滤镜实现图片不同渲染效果
本站在首页文章封面图从无色转变为有色,以及页面切换、发布留言等信息提示的背景模糊都利用到了css3的filter滤镜。 CSS3 Filter是W3C CSS filter Effect 1.0中定义的滤镜,一个使用CSS来改变图片和HTML的模糊度、亮度、对比度、饱和度等等效果的过滤器。
1037 0
总结CSS3新特性(媒体查询篇)
CSS3的媒体查询是对CSS2媒体类型的扩展,完善; CSS2的媒体类型仅仅定义了一些设备的关键字,CSS3的媒体查询进一步扩展了如width,height,color等具有取值范围的属性; media query 与 media type 的区别在于: media query是一个值或一个范围...
767 0
VS解决方案的“显示所有文件等属性”
VS解决方案属性中的六大金刚: 一、属性 二、显示所有文件 显示所有文件/隐藏某些文件。 三、刷新 四、查看代码 五、视图设计器 ...
781 0
用CSS设置的border属性及标签不显示下划线
1.在CSS样式表中并不能直接对表格元素的border元素进行设定,那么要想实现像Excel表格样式的表格怎么办呢?只能对表格和单元格分别加边框来实现,具体的是:对表格显示上边框和左边框,而让每个单元格显示下边框和右边框,这样一组合起来就达到了中的border一样的效果,具体的代码如下: TABLE.
851 0
用CSS来改变网页鼠标显示样式的方法
一般而言,鼠标以斜向上的箭头显示,移到文本上时变为有头的竖线,移到超级链接上变为手型。但用css可控制鼠标的显示效果,如可使鼠标移到普通文本上也显示成手型。 用css控制的语法如下: 文本或其它页面元素 把 * 换成如下15个效果的一种: hand、crosshair、text、wait、default、help、e-resize、ne-resize、n-resize、nw-resize、w-resize、sw-resize、s-resize、se-resize和auto。
670 0
+关注
毛瑞
三十课(30ke.cn) 编程,学习,分享,记录生活的点点滴滴,保持热情42度。
12
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载