css mask遮罩层详解

更新日期: 2022-10-23阅读: 839标签: 样式

mask简介

css的mask属性允许使用者通过部分或者完全隐藏一个元素的可见区域。这种效果可以通过遮罩或者裁切特定区域的图片。mask和background用法是相仿的,mask的值有这些:

mask-clip
mask-composite
mask-image
mask-mode
mask-origin
mask-position
mask-repeat
mask-size
mask-type

下面具体介绍每一个值的意义


1. mask-clip

含义
content-box将绘制的内容剪切到内容框中。
padding-box将绘制的内容剪切到padding框中。
border-box将绘制的内容剪切到border框中。
margin-box将绘制的内容剪切到margin框中。
fill-box将绘制的内容剪切到对象边界框中。
stroke-box将绘制的内容剪切到stroke边界框中。
view-box使用最近的SVG视口作为参考框。
如果为创建SVG视口的元素指定了viewBox属性,则参考框
位于由viewBox属性建立的坐标系的原点,并且参考框的尺寸
被设置为viewBox属性的宽度和高度值。
no-clip没有被剪切。

mask-clip的默认值是border-box,而且支持多属性值,例如:

mask-clip: content-box, border-box;

虽然支持的属性值挺多,但是对于普通元素而言,生效的其实就前面4个,Firefox浏览器还支持no-clip。fill-box,stroke-box,view-box要与SVG元素关联才有效果,目前还没有任何浏览器对其进行支持。


2. mask-composite

含义
add遮罩累加。
subtract遮罩相减。也就是遮罩图片重合的地方不显示。
intersect遮罩相交。也就是遮罩图片重合的地方才显示遮罩。
exclude遮罩排除。也就是后面遮罩图片重合的地方排除,当作透明处理。

以上属性值,目前仅Firefox浏览器支持,Chrome默认mask-composite计算值是source-over,和标准默认值add有些差异,作用是一样的,表示多个图片遮罩效果是累加。


3. mask-image

mask-image指遮罩使用的图片资源,默认值是none,也就是无遮罩图片。所谓遮罩,就是原始图片只显示遮罩图片非透明的部分。

mask-image也支持多属性值,例如:

mask-image: url(...), url(...);


4. mask-mode

mask-mode属性的默认值是match-source,意思是根据资源的类型自动采用合适的遮罩模式。

例如,如果我们的遮罩使用的是SVG中的<defs>中的<mask>元素,则此时的mask-mode属性的计算值是luminance,表示基于亮度遮罩。如果是其他场景,则计算值是alpha,表示基于透明度遮罩。

含义
alpha基于透明度遮罩
luminance基于亮度遮罩
match-source根据资源的类型自动采用合适的遮罩模式

mask-mode也支持多属性值,例如:

mask-mode: alpha, match-source;

目前,mask-mode仅Firefox浏览器支持,因此,Chrome浏览器是看到的依然是基于alpha遮罩的效果,颜色不像上图那样淡。


5. mask-repeat

含义
repeat-x水平x平铺
repeat-y垂直y平铺
repeat默认值,水平和垂直平铺
no-repeat不平铺
space表示遮罩图片尽可能的平铺同时不发生任何剪裁
round表示遮罩图片尽可能靠在一起没有任何间隙,同时不发生任何剪裁。
这就意味着图片可能会有比例的缩放。

mask-repeat也支持多属性值,例如:

mask-repeat: space round, no-repeat;


6. mask-position

支持单个关键字,如top,bottom,left,right,center(缺省关键字的解析为center)

支持各类数值(百分数或数值),例如:mask-position: 30% 50%;

mask-position也支持多属性值,例如:mask-position: 0 0, center;

Chrome和Firefox浏览器都支持mask-position属性,Chrome还需要-webkit-私有前缀,Firefox浏览器现在已经不需要了。


7. mask-origin

含义
content-box位置相对于内容框。
padding-box位置相对于padding框。
border-box位置相对于border框。
margin-box位置相对于margin框。
fill-box位置相对于对象边界框。
stroke-box位置相对于stroke边界框。
view-box使用最近的SVG视口作为参考框。
如果为创建SVG视口的元素指定了viewBox属性,则参考框
位于由viewBox属性建立的坐标系的原点,并且参考框的尺寸
被设置为viewBox属性的宽度和高度值。

mask-origin的默认值是border-box,而且支持多属性值,例如:

mask-origin: content-box, border-box;

虽然支持的属性值挺多,但是对于普通元素而言,生效的其实就前面4个。fill-box,stroke-box,view-box要与SVG元素关联才有效果,目前还没有任何浏览器对其进行支持。


8. mask-size

mask-size作用是控制遮罩图片尺寸,默认值是auto。

支持contain和cover这两个关键字

支持各类数值(缺省高度会自动计算为auto),例如:mask-size: auto 6px;

同样支持多属性值,例如:mask-size: 50%, 25%, 25%;


9. mask-type

mask-type属性功能上和mask-mode类似,都是设置不同的遮罩模式。但还是有个很大的区别,那就是mask-type只能作用在SVG元素上,本质上是由SVG属性演变而来,因此,Chrome等浏览器都是支持的。但是mask-mode是一个针对所有元素的CSS3属性,Chrome等浏览器并不支持,目前仅Firefox浏览器支持。

由于只能作用在SVG元素上,因此默认值表现为SVG元素默认遮罩模式,也就是默认值是luminance,亮度遮罩模式。如果需要支持透明度遮罩模式,可以这么设置:mask-type: alpha;


链接: https://www.fly63.com/article/detial/12211

css样式大全,完整的Css样式大全(整理)

CSS样式被称为为“层叠样式表”,是一种网页制作做不可或缺的技术,是用于装饰网页,达到设计效果的一种样式语言。

css 分割线样式_css实现文章分割线的多种方法总结

这篇文章整理css如何实现文章分割线的多种方式,分割线在页面中可以起到美化作用,那么就来看看使用css实现分割线样式的多种方法:单个标签实现分隔线、巧用背景色实现分隔线、inline-block实现分隔线、浮动实现分隔线、利用字符实现分隔线

原生js获取、添加、修改_非行间css样式

在html中样式分为:浏览器默认样式,引用样式(link外部样式文件,stle标签定义样式)、行间样式(及节点style属性定义的样式)。这篇文章主要讲解使用原生js获取、添加非行间css样式。

好看css搜索框样式_分享8款纯CSS搜索框

最简单实用的CSS3搜索框样式,纯CSS效果无需任何javascript,其中部分搜索框在点击的时候有动画特效,搜索框的应用也是比较普通的,代码如下!

css常用样式整理_css属性大全

css常用样式有哪些?这篇文章整理如下内容:字体属性(font)、 常用字体 (font-family)、背景属性 (background)、区块属性 (Block)、方框属性 (Box)、边框属性 (Border)、列表属性 (List-style)、定位属性 (Position)、CSS文字属性

CSS层叠样式表

层叠样式表,用来表现HTML或者XML等文件样式的计算机语言。网页表现与内容分离的样式设计语言,能够对网页中对象排版进行像素级精确控制,几乎支持所有字体字号

css样式的继承性、层叠性 、优先级

css样式的继承性:给父元素设置一些属性,子元素也可以使用。应用场景:一般用于设置网页上的一些共性信息,例如网页的文字颜色,字体,文字大小等内容。优化代码,降低工作量

如何用自己喜欢的 CSS 风格重置网站的样式

许多前端开发人员都在用 Normalize 为他们的网站设计样式。一些人喜欢在 Normalize.css 中添加一些自己偏好的样式,我也一样。在本文中,我会与你分享我自己的 CSS reset 项目(除了 Normalize.css 之外我还使用它们)。

css单行截断和多行截断问题

多行截断有好几种方法,可以直接使用float方法,方便自定义样式及监听事件,并且兼容性好,是暂时最完美的解决方案。就是略复杂,不过网上有可以直接拿来用哦~

引入CSS样式的三种方式

行内式:该语法中style是标记的属性,实际上任何HTML标记都拥有style属性,用来设置行内式。内嵌式<style>标记一般位于<head>标记中的<title>标记之后,也可以把它放在HTML文档的任何地方。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!