前往小程序，Get更优阅读体验！
立即前往
文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP最新优惠活动
返回腾讯云官网
社区首页 >专栏 >用CSS新属性实现特殊的图片显示效果

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

作者头像
毛瑞
修改于 2019-09-20 14:23:45
1.1K0
修改于 2019-09-20 14:23:45
举报
文章被收录于专栏：三十课

1 概述

1.1 前言

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

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

2 效果列表

2.1 铅笔画效果

效果示例
铅笔画效果
铅笔画效果
SCSS代码
代码语言：txt
复制
.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代码
代码语言：txt
复制
.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代码
代码语言：txt
复制
.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代码
代码语言：txt
复制
.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代码
代码语言：txt
复制
.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代码
代码语言：txt
复制
.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代码
代码语言：txt
复制
.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代码
代码语言：txt
复制
.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代码
代码语言：txt
复制
.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代码
代码语言：txt
复制
.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代码
代码语言：txt
复制
.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代码
代码语言：txt
复制
.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代码
代码语言：txt
复制
.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代码
代码语言：txt
复制
.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代码
代码语言：txt
复制
.infrared-effect {
  $url : url(photo.jpg);
  background-image: $url;
  background-size: cover;
  background-position: center;
  filter: hue-rotate(180deg) saturate(2);
}

查看示例程序

2.16 夜视效果

效果示例
夜视效果
夜视效果
SCSS代码
代码语言：txt
复制
.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代码
代码语言：txt
复制
.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代码
代码语言：txt
复制
.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代码
代码语言：txt
复制
.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代码
代码语言：txt
复制
.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的个人网站，只做学习和交流使用。

本文系外文翻译，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

css
流计算 Oceanus

本文系外文翻译，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

css
流计算 Oceanus
评论
登录后参与评论
0 条评论
热度
最新
登录 后参与评论
推荐阅读
LV.
文章
0
获赞
0
目录
  • 1 概述
    • 1.1 前言
    • 2 效果列表
      • 2.1 铅笔画效果
        • 效果示例
        • SCSS代码
      • 2.2 水彩效果
        • 效果示例
        • SCSS代码
      • 2.3 浮雕效果
        • 效果示例
        • SCSS代码
      • 2.4 彩铅效果
        • 效果示例
        • SCSS代码
      • 2.5 黑板效果
        • 效果示例
        • SCSS代码
      • 2.6 彩色黑板效果
        • 效果示例
        • SCSS代码
      • 2.7 喷枪效果
        • 效果示例
        • SCSS代码
      • 2.8 绚烂效果
        • 效果示例
        • SCSS代码
      • 2.9 绒布效果
        • 效果示例
        • SCSS代码
      • 2.10 水平低墨
        • 效果示例
        • SCSS代码
      • 2.11 垂直低墨效果
        • 效果示例
        • SCSS代码
      • 2.12 拼贴效果
        • 效果示例
        • SCSS代码
      • 2.13 马赛克效果
        • 效果示例
        • SCSS代码
      • 2.14 图片边框效果
        • 效果示例
        • SCSS代码
      • 2.15 红外效果
        • 效果示例
        • SCSS代码
      • 2.16 夜视效果
        • 效果示例
        • SCSS代码
      • 2.17 沃霍尔效果
        • 效果示例
        • SCSS代码
      • 2.18 颜色校正效果
        • 效果示例
        • SCSS代码
      • 2.19 水平镜像效果
        • 效果示例
        • SCSS代码
      • 2.20 垂直镜像效果
        • 效果示例
        • SCSS代码
    • 3 结尾
      • 3.1 结语
      相关产品与服务
      流计算 Oceanus
      流计算 Oceanus 是大数据产品生态体系的实时化分析利器，是基于 Apache Flink 构建的企业级实时大数据分析平台，具备一站开发、无缝连接、亚秒延时、低廉成本、安全稳定等特点。流计算 Oceanus 以实现企业数据价值最大化为目标，加速企业实时化数字化的建设进程。
      产品介绍
      腾讯云大数据特惠专场
      领券

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档

      Copyright © 2013 - 2024 Tencent Cloud.

      All Rights Reserved. 腾讯云 版权所有

      登录 后参与评论