css : mask属性之位图遮罩

马黑黑

小辣椒 发表于 2024-1-12 23:06
这个图片遮罩效果太美了

还可以的吧

马黑黑

小辣椒 发表于 2024-1-12 23:05
谢谢黑黑，真暖心

小辣椒

马黑黑 发表于 2024-1-12 23:15
对的

玩过拉

小辣椒

马黑黑 发表于 2024-1-12 23:15
这个要设计一下

等黑黑深度的分享帖

小辣椒

马黑黑 发表于 2024-1-12 23:16
还可以的吧

第一次看见玩这种效果，最主要做帖可以更加轻松一点

马黑黑

小辣椒 发表于 2024-1-12 23:39
第一次看见玩这种效果，最主要做帖可以更加轻松一点

马黑黑

小辣椒 发表于 2024-1-12 23:38
等黑黑深度的分享帖

这些技术其实我们用过的，比方说，光盘中间的挖孔，用的就是 mask

马黑黑

小辣椒 发表于 2024-1-12 23:37
玩过拉

玩啥

红影

重回来复习才发现，昨天就奇怪，为什么用repeat-x后两张遮罩不是挨着的。
原来240是设置的遮罩大小，而图片仍然是200 。是这样理解么？

红影

2个240，共480，超出去30，实际遮罩两边都空40，那么左移20 ，正好让两个遮罩居中
之前我以为240是把位图放大了，原来是放大了遮罩范围。

红影

如此nth-of-type(2)又不理解了，这个75%的尺寸是谁的75%
可能我的理解还是有误。

马黑黑

红影 发表于 2024-1-13 11:00
如此nth-of-type(2)又不理解了，这个75%的尺寸是谁的75%
可能我的理解还是有误。

background和mask的语法规范一样。当使用语法糖，就是连着写参数，位置和尺寸这么写：

    center / cover;

其中，center 是位置，相当于 50% 或 50% 50% ；cover 是尺寸，这里表示图片以某一边为基准、令图片不拉伸扭曲。

如果使用数字，我们还可以这么表示：

    25% 50% / 75%

这表示，背景或遮罩图片的位置在水平方向 25%、垂直方向 50% 处，尺寸为图片的 75%。

如果图片尺寸宽高不同，上面的表达式可以这样写：

    25% 25% / 75% 80%

侃大山

马黑黑 发表于 2024-1-12 21:31
百分浏览器的内核低于当下流行的内核。我修改了代码，增加了兼容性，你刷新试试。

看到了，很神奇

红影

马黑黑 发表于 2024-1-12 21:16
mask也用过，一些特殊的场景，好像没有专门讲过

所以也没记住，现在看到感觉好神奇

红影

马黑黑 发表于 2024-1-13 11:07
background和mask的语法规范一样。当使用语法糖，就是连着写参数，位置和尺寸这么写：

    center / c ...

哦，还能这样设置遮罩尺寸。嗯嗯，学习了。谢谢黑黑

马黑黑

红影 发表于 2024-1-13 15:21
所以也没记住，现在看到感觉好神奇

遮罩和PS的蒙层差不多

马黑黑

侃大山 发表于 2024-1-13 15:10
看到了，很神奇

效果不错的，各大主流浏览器已经支持，国内封装的浏览器它的内核其实也支持，封装时没有开启。

侃大山

马黑黑 发表于 2024-1-13 17:54
效果不错的，各大主流浏览器已经支持，国内封装的浏览器它的内核其实也支持，封装时没有开启。

怪不得之前看不到。

小辣椒

马黑黑 发表于 2024-1-13 08:48
这些技术其实我们用过的，比方说，光盘中间的挖孔，用的就是 mask

这个我都想不到一块去

主要是没有真正领会过

小辣椒

马黑黑 发表于 2024-1-13 08:48
玩啥

把你代码复制到自己电脑换个图片预览一下