关于蒙版（mask）的了解

需求：就是给出一段文字需要从上到下实现渐变，上面不透明，向下逐渐变的透明，最下方透明，效果如下

实现：利用css的mask属性加上linear-gradien渐变

mask: linear-gradient(to top, transparent, #fff);
-webkit-mask: linear-gradient(to top, transparent, #fff);

mask：CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

/* Keyword values */
mask: none;/* Image values */
mask: url(mask.png);                       /* 使用位图来做遮罩 */
mask: url(masks.svg#star);                 /* 使用 SVG 图形中的形状来做遮罩 *//* Combined values */
mask: url(masks.svg#star) luminance;       /* Element within SVG graphic used as luminance mask */
mask: url(masks.svg#star) 40px 20px;       /* 使用 SVG 图形中的形状来做遮罩并设定它的位置：离上边缘40px，离左边缘20px */
mask: url(masks.svg#star) 0 0/50px 50px;   /* 使用 SVG 图形中的形状来做遮罩并设定它的位置和大小：长宽都是50px */
mask: url(masks.svg#star) repeat-x;        /* Element within SVG graphic used as horizontally repeated mask */
mask: url(masks.svg#star) stroke-box;      /* Element within SVG graphic used as mask extending to the box enclosed by the stroke */
mask: url(masks.svg#star) exclude;         /* Element within SVG graphic used as mask and combined with background using non-overlapping parts *//* Global values */
mask: inherit;
mask: initial;
mask: unset;

mask的简写会将 mask-border 设为初始值。使用 mask 的简写优于使用其他简写或者各自属性的设置来覆盖。这能保证 mask-border 也会重新设置为新的效果样式。

linear-gradient(): 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于数据类型，是一种特别的数据类型。

/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/mask
参考： https://developer.mozilla.org/zh-CN/docs/Web/CSS/gradient/linear-gradient

关于蒙版（mask）的了解相关推荐

OpenCV使用蒙版mask过滤图像的实例(附完整代码)
OpenCV使用蒙版mask过滤图像的实例 OpenCV使用蒙版mask过滤图像的实例 OpenCV使用蒙版mask过滤图像的实例 #include <opencv2/imgcodecs.hpp ...
文字与图片渐变效果（图层CALayer与属性蒙版mask ）
首先,我们需要稍微理清一下CAGradientLayer.CALayer,UIView和mask的大概关系. 在iOS中,能看得见摸的着的基本都是UIView,如按钮.图片等.UIView之所以能看得 ...
Sketch Mac入门基础知识——蒙版(Mask)的详细使用方法介绍
在上一篇文章,我们认识了Sketch Mac这款软件,在本文中,我们再来看看Sketch Mac入门基础知识--蒙版(Mask)的详细使用方法介绍,让您更多更好的了解Sketch Mac,为以后使用奠 ...
CSS3蒙版 Mask
之前mask这个属性用的比较少,对它也并不了解,又一次在前端群里面五一看到人打了一个这样的属性出来,我感觉很陌生,马上去看了,原来真的有这么神奇的属性,蒙版,可以实现很多复杂多样化的遮罩. 语法: - ...
python之 ffmpeg+opencv绿幕抠图，蒙版绿幕抠图，透明化处理，PIL检测图片是否包含透明通道
目录 OpenCV-Python实现绿幕图像抠图 python利用蒙版批量抠图并实现透明化 jpeg格式图片进行批量背景透明化处理 PIL检测图片是否包含透明通道 OpenCV-Python实现绿幕图 ...
Lr 12 ACR 15：蒙版
Adobe Camera Raw (简称为 ACR)与 Lightroom Classic(简称为 Lr 或 LrC)使用同一引擎,其中的蒙版 Mask功能变得日益强大. 基于人工智能技术(AI 驱动 ...
Ae 入门系列之七：蒙版与遮罩
一般来说,素材自身的 Alpha 通道定义着图层的透明度信息.单击查看器面板下方的"显示通道及色彩管理设置"按钮,可选择查看当前图层的 Alpha 通道. 单击"切换透明 ...
蒙版原理以及Python简单实现
第一次发博客,就试试看的心态,不喜勿喷~ 蒙版可以将两张毫不相关的图片合成为一张图,其实就是使用蒙版mask对两张图片的像素做了加权平均处理的结果. 比如对于像素点(x1,y1,v1), (x2,y2 ...
Ae 入门系列之五：蒙版与轨道遮罩
一般来说,素材自身的 Alpha 通道定义了像素的透明度. 单击查看器面板下方的"显示通道和色彩管理设置"按钮,可选择查看当前图层的 Alpha 通道. 单击"切换透明网 ...
Sketch(二)——蒙版
蒙版Mask 官方定义:Sketch里的蒙版可以让你有选择性的显示出图层的一部分.比如说在一个图片上圆形蒙版,那么这张图片就只会显示出圆形内部的内容. 相当于PS中的剪切蒙版,是一个形状遮罩,只会按照 ...

关于蒙版（mask）的了解

关于蒙版（mask）的了解

需求：就是给出一段文字需要从上到下实现渐变，上面不透明，向下逐渐变的透明，最下方透明，效果如下

实现：利用css的mask属性加上linear-gradien渐变

mask：CSS 属性 mask 允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。

linear-gradient(): 函数用于创建一个表示两种或多种颜色线性渐变的图片。其结果属于数据类型，是一种特别的数据类型。

关于蒙版（mask）的了解相关推荐

最新文章

热门文章