透明背景情况下遮罩出不规则图片

我们在处理图片,比如用户头像的时候,通常上传的都是矩形图片
例如:
3250007602-547424f893b6a_huge256

有时候根据设计师的需求,会要求是圆形或者带圆角,这时候我们通常使用css border-radius来达到这一效果:

css.avatar {
    width: 50px;
    height: 50px;
    overflow: hidden;
    border-radius: 50%;
}
.avatar > img {
    width: 100%;
    height: 100%;
}

但是这次遇到的一个需求是,图片要不规则显示出来,设计稿中是这样的
图片描述

好我们来想可能办法,总体思路是遮罩,难点是遮罩出的图片是不规则,要有白色边框,背景透明。

  1. 使用png透明蒙版
  2. css shape、clip等
  3. 在四个角画三角形来遮罩出六边形
  4. canvas
  5. svg

我们来一一试验:

使用png透明蒙版

如果纯色背景还可以,但是背景要求透明的,所以第一种看样子不大可能了。

css shape、clip等

css-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

这样确实可以画出来六边形,背景也可以是透明,如果仔细研究还有可能画出白色的边框但是
图片描述
这样画出来是完全的标准六边形,而设计稿是带设计师傲娇的圆角的,显然不符合精准还原。
http://jsfiddle.net/chromefans/30oepvhz/3/embedded/

在四个角画三角形来遮罩出六边形

这样也确实可以画出六边形,但是实现出来效果和css shape一样,标准六边形,只是兼容性要好一些。

canvas

我这里没做canvas的demo,就不演示了,如果实在没有完美的方式,就回来用canvas。

svg

好的,终于码到这里了……
在经过一系列研究探讨之后,发现了这篇文章
http://www.html5rocks.com/en/tutorials/masking/adobe/
文中很巧妙的实现了在不规则情况下显示图片,还可以透明背景,在查阅mdn后,还原了设计稿。
图片描述
还原一下步骤,这个方式需要设计师配合导出一个处理好透明区域的svg,在使用-webkit-mask-box-image方法把svg当做蒙版,这时输出的图片已经是六边形的了
那白色边框怎么办?
既然头像大小是固定的,渲染出来六边形也是固定的,那就。
图片描述
切一个盖在上面吧。

demo:
http://jsfiddle.net/chromefans/p3t6pdqe/1/embedded/


切图汪
做一只安静的切图汪,这样就好。

PHP Parse error: syntax error, unexpected T_STRING in www\segmentfault.com\module\user\setting.ph...

1.7k 声望
70 粉丝
0 条评论
推荐阅读
文字垂直居中
今天看到一个解决文字垂直居中的demo,无论从扩展性还是周围影响性,都很巧妙且不牵强: {代码...} 真是一举解决了困扰多年的难性问题。 [链接]

狗屌阅读 2.8k评论 3

你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan22阅读 1.6k评论 1

封面图
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图
用了那么久的 SVG,你还没有入门吗?
其实在大部分的项目中都有 直接 或 间接 使用到 SVG 和 Canvas,但是在大多数时候我们只是选择 简单了解 或 直接跳过,这有问题吗?没有问题,毕竟砖还是要搬的!

熊的猫17阅读 1.6k评论 2

封面图
那些不用js也能实现的效果
本文首发于公众号:GitWeb,欢迎关注,接收首发推文本文列举几个不需要使用js也能实现的效果一、页面回到顶部回到顶部是页面开发中很常见的一个功能,一般的做法是对回到顶部组件做一个监听,当用户点击的时候,...

Winn11阅读 1.1k评论 6

封面图
Three.js 进阶之旅:全景漫游-初阶移动相机版
3D 全景技术可以实现日常生活中的很多功能需求,比如地图的街景全景模式、数字展厅、在线看房、社交媒体的全景图预览、短视频直播平台的全景直播等。Three.js 实现全景功能也是十分方便的,当然了目前已经有很多...

dragonir12阅读 1.5k

封面图
巧用 CSS 变量,实现动画函数复用,制作高级感拉满的网格动画
这里我们借助了上面 #12、结构性伪类 中的 :root{ } 伪类,在全局 :root{ } 伪类中定义了一个 CSS 变量,取名为 --bgColor 。

chokcoco11阅读 2.9k

封面图

PHP Parse error: syntax error, unexpected T_STRING in www\segmentfault.com\module\user\setting.ph...

1.7k 声望
70 粉丝
宣传栏