前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >简单说 CSS中的mask—好好利用mask-image

简单说 CSS中的mask—好好利用mask-image

作者头像
FEWY
发布2019-05-26 21:30:20
1.3K0
发布2019-05-26 21:30:20
举报
文章被收录于专栏:FEWY

说明

CSS中的 mask 属性允许用户屏蔽或剪裁特定点的图像来实现,部分或完全隐藏某个元素的可见性。 好吧,这个概念可能有点不好理解,先看图。

这里写图片描述
这里写图片描述

看了这个等式,似乎明白点什么了吧,朋友们,第一张图就是一张普通的图,第二张图,黑色部分是不透明的,白色部分是透明的,用上 mask 之后,两张图重叠,黑色区域中的会显示出来,白色区域不显示。

用过 ps 的朋友,应该很清楚,蒙版这东西,这就和蒙版很像,好吧,没用过 ps 的朋友,又要问蒙版是什么了,相信看完这篇文章,你应该连蒙版也知道了。

mask 和 background 用法是相仿的,mask 的值有这些

代码语言:javascript
复制
mask-clip
mask-composite
mask-image
mask-mode
mask-origin
mask-position
mask-repeat
mask-size
mask-type

具体细节参考这里: CSS background 属性 CSS mask 属性

解释

由于目前,只有webkit内核的浏览器支持 mask 属性,所以考虑到兼容性的话,用mask 属性的时候还是要想想的。

今天我们主要说说 mask-image,这个比较有意思,这两个单词翻译过来就是,面具 图片,的确很形象,真的就像是给元素带上一个面具一样。 我们直接上代码,把上面提到那个等式,实现一下,顺便说一句,mask-image 和 background-image 一样,不仅可以取值是 图片路径,也可以是渐变色。

代码语言:javascript
复制
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">

  <style>
	.mask{
		width:475px;
		height:260px;
		background-image:url("https://img-blog.csdn.net/20170701221659356");

		/* 取值是图片路径 */
		-webkit-mask-image:url("https://img-blog.csdn.net/20170701221732018");
	}
  </style>
 </head>
 <body>
	<div class="mask"> </div>
 </body>

</html>

background-image

这里写图片描述
这里写图片描述

-webkit-mask-image

这里写图片描述
这里写图片描述

效果图

这里写图片描述
这里写图片描述
代码语言:javascript
复制
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">

  <style>
	.mask{
		width:475px;
		height:260px;
		background-image:url("https://img-blog.csdn.net/20170701221659356");

		/* 取值是渐变色 */
		-webkit-mask-image:linear-gradient(blue, transparent);
	}
  </style>
 </head>
 <body>
	<div class="mask"> </div>
 </body>

</html>

效果图

这里写图片描述
这里写图片描述

我再善意的提醒下,-webkit-mask-image 的值应该是一张,背景是透明色的图,或者说有透明色,而透明色的区域,最后都是不显示的。

下面是 mask 和 animation 配合完成的一个效果

效果图

这里写图片描述
这里写图片描述
代码语言:javascript
复制
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">

  <style>
	 @keyframes mask{
		0% {-webkit-mask-position:0px 0px;}
		25% {-webkit-mask-position:619px 0px;}
		50% {-webkit-mask-position:0px 0px;}
		75% {-webkit-mask-position:308px 0px;-webkit-mask-size:100%;}
		100% {-webkit-mask-size:1000%;}
	 }

	.mask{
		width:700px;
		height:392px;
        background:black url("http://www.kkkk1000.com/images/1534750163.jpg");
        -webkit-mask-image:url("http://www.kkkk1000.com/images/1534750222.jpg");
		animation:mask 5s linear infinite forwards;
	}
  </style>
 </head>
 <body>
	<div class="mask"> </div>
 </body>

</html>

总结

说了这么多相信你也一定明白mask-image属性了,如果还是不清楚,那就多看看下面这张图吧!!!

这里写图片描述
这里写图片描述
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2017年07月01日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

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

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 说明
  • 解释
  • 总结
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档