小辣椒 发表于 2024-1-12 23:06
这个图片遮罩效果太美了
还可以的吧
小辣椒 发表于 2024-1-12 23:05
谢谢黑黑，真暖心
{:4_190:}
马黑黑 发表于 2024-1-12 23:15
对的
玩过拉{:4_170:}
马黑黑 发表于 2024-1-12 23:15
这个要设计一下
等黑黑深度的分享帖{:4_173:}
马黑黑 发表于 2024-1-12 23:16
还可以的吧
第一次看见玩这种效果，最主要做帖可以更加轻松一点{:4_189:}
小辣椒 发表于 2024-1-12 23:39
第一次看见玩这种效果，最主要做帖可以更加轻松一点
{:4_181:}
小辣椒 发表于 2024-1-12 23:38
等黑黑深度的分享帖
这些技术其实我们用过的，比方说，光盘中间的挖孔，用的就是 mask
小辣椒 发表于 2024-1-12 23:37
玩过拉
玩啥
重回来复习才发现，昨天就奇怪，为什么用repeat-x后两张遮罩不是挨着的。
原来240是设置的遮罩大小，而图片仍然是200 。是这样理解么？
2个240，共480，超出去30，实际遮罩两边都空40，那么左移20 ，正好让两个遮罩居中{:4_199:}
之前我以为240是把位图放大了，原来是放大了遮罩范围。
如此nth-of-type(2)又不理解了，这个75%的尺寸是谁的75%{:4_203:}
可能我的理解还是有误。
红影 发表于 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
百分浏览器的内核低于当下流行的内核。我修改了代码，增加了兼容性，你刷新试试。
看到了，很神奇{:5_116:}
马黑黑 发表于 2024-1-12 21:16
mask也用过，一些特殊的场景，好像没有专门讲过
所以也没记住，现在看到感觉好神奇{:4_173:}
马黑黑 发表于 2024-1-13 11:07
background和mask的语法规范一样。当使用语法糖，就是连着写参数，位置和尺寸这么写：
center / c ...
哦，还能这样设置遮罩尺寸。嗯嗯，学习了。谢谢黑黑{:4_187:}
红影 发表于 2024-1-13 15:21
所以也没记住，现在看到感觉好神奇
遮罩和PS的蒙层差不多
侃大山 发表于 2024-1-13 15:10
看到了，很神奇
效果不错的，各大主流浏览器已经支持，国内封装的浏览器它的内核其实也支持，封装时没有开启。
马黑黑 发表于 2024-1-13 17:54
效果不错的，各大主流浏览器已经支持，国内封装的浏览器它的内核其实也支持，封装时没有开启。
怪不得之前看不到。
马黑黑 发表于 2024-1-13 08:48
这些技术其实我们用过的，比方说，光盘中间的挖孔，用的就是 mask
这个我都想不到一块去{:4_198:}
主要是没有真正领会过
马黑黑 发表于 2024-1-13 08:48
玩啥
把你代码复制到自己电脑换个图片预览一下