移动端遮罩图垂直拉伸变形？检查 -webkit-mask-repeat-y 的 round 值
当遮罩图在垂直方向上出现拉伸变形时，需要检查 -webkit-mask-repeat-y 属性的 round 值设置。
排查遮罩图垂直拉伸变形的原因
移动端页面中使用了遮罩图，但在垂直方向上图片出现了拉伸变形，导致显示效果不自然。这种情况通常是因为遮罩图被重复平铺时，浏览器自动调整了图片的高度以填满容器，而不是保持原始比例。根据资料说明，round 属性会让重复的图像在垂直方向上拉伸，直到有足够的空间容纳下一个图像，然后所有图像会压缩以适应新的空间。
具体来说，当设置了 -webkit-mask-repeat-y: round 时，浏览器会根据允许的垂直空间大小来调整图像高度。资料中给出的例子是，一个原始高度为 260px 的图像，重复三次后可能会被拉伸到每个重复项 300px 高，直到有空间添加下一个图像，此时所有图像又会压缩到 225px 高。这种动态调整会导致图像在视觉上变形，而不是保持原始比例。
使用 round 值时的具体表现
round 值的核心机制是“拉伸”与“压缩”交替进行。资料指出，随着允许的垂直空间增加，重复的图像会拉伸（不留间隙），直到有足够的空间容纳下一个图像。当添加下一个图像时，当前所有图像会压缩以腾出空间。这种机制虽然能保证图像填满容器且不留间隙，但会导致图像本身的尺寸发生变化，从而产生拉伸变形的效果。
除了拉伸变形，round 值还会忽略 mask-position 属性，除非只有一个图像可以在不裁剪的情况下显示。资料补充说明，使用 space 值时，只有当没有足够的空间显示一个图像时才会发生裁剪。这意味着在 round 模式下，浏览器会优先保证图像填满容器，而不是保持图像的原始尺寸和位置，这可能是导致变形的直接原因。
检查与验证 round 值设置的方法
要验证遮罩图是否因为 round 值而变形，可以在浏览器开发者工具中检查元素的 -webkit-mask-repeat-y 属性。如果该属性被设置为 round，那么在垂直方向上重复的遮罩图很可能会出现拉伸或压缩现象。可以通过调整容器的高度，观察图像是否随之动态调整高度，从而确认是否处于 round 模式。
另一种验证方法是对比 round 值与 repeat 值的效果。如果将 -webkit-mask-repeat-y 从 round 改为 repeat，图像将保持原始尺寸并重复平铺，垂直方向上不会出现拉伸或压缩。通过对比这两种模式下的显示效果，可以明确判断变形是否由 round 值引起。如果确认是 round 导致的，可以考虑改用 repeat 或 no-repeat 来避免变形。
解决垂直拉伸变形的操作步骤
如果确认变形是由 -webkit-mask-repeat-y 的 round 值引起的，可以通过修改 CSS 属性来解决。首先，将 -webkit-mask-repeat-y 的值从 round 改为 repeat，这样遮罩图将保持原始尺寸并垂直重复，不会出现拉伸或压缩。如果只需要显示一个遮罩图，也可以将其设置为 no-repeat，以避免重复导致的变形。
在修改 CSS 后，保存文件并刷新移动端页面，检查遮罩图的显示效果是否恢复正常。如果问题依然存在，可能需要检查其他相关属性，如 -webkit-mask-image 或 -webkit-mask-position，以确保没有其他因素影响遮罩图的显示。通过逐步排查和调整，可以有效地解决垂直拉伸变形的问题。
资料与延伸阅读
你可以通过以下原始资料核对文中概念，并继续深入阅读。