重复径向渐变+图片裁剪效果演示

马黑黑

<style> .box { width: 400px; height: 400px; background: repeating-radial-gradient( darkgreen 0 0.15%, green 0 0.3%, lightgreen 0 0.45% ); margin: 20px auto; position: relative; } .box:hover { mask: url('https://638183.freep.cn/638183/small/hxdo.png') no-repeat center/cover; } .tMid { text-align: center; margin: 10px 0; } </style> <div class="box"></div> <p class="tMid">鼠标移到上图试试（移动设备点击）</p>

梦江南

真神奇，鼠标往上点就成漂亮的花形了。

马黑黑

梦江南 发表于 2025-8-17 11:51
真神奇，鼠标往上点就成漂亮的花形了。

花飞飞

这是先整出了个漂亮的径向渐变背景，花纹设计好漂亮啊。。不是一般的那种圆的。。
鼠标移上去后图片遮罩发挥作用，就显示漂亮的花形轮廓

花飞飞

darkgreen 0 0.15%,
green 0 0.3%,
lightgreen 0 0.45%
这是用深深浅浅的细线条绿色组合起来的，原来这种方法可以整出漂亮的高级纹理

红影

这种方式设置的重复径向渐变，得到的图案好漂亮，也好奇妙。应该是划分太细，才出现这样效果

红影

这个遮罩图也用得好，正好适应渐变图案的几个方向呢

马黑黑

红影 发表于 2025-8-17 13:05
这种方式设置的重复径向渐变，得到的图案好漂亮，也好奇妙。应该是划分太细，才出现这样效果

还可以尝试更细小的比例

马黑黑

红影 发表于 2025-8-17 13:05
这个遮罩图也用得好，正好适应渐变图案的几个方向呢

配套的

马黑黑

花飞飞 发表于 2025-8-17 12:44
这是先整出了个漂亮的径向渐变背景，花纹设计好漂亮啊。。不是一般的那种圆的。。
鼠标移上去后图片遮罩发 ...

也可以将 mask 直接用于元素CSS属性中

马黑黑

花飞飞 发表于 2025-8-17 12:46
darkgreen 0 0.15%,
green 0 0.3%,
lightgreen 0 0.45%

对。不嫌麻烦的话，可以使用同一种颜色，通过  rgba 的 a 通道控制深浅

红影

马黑黑 发表于 2025-8-17 13:13
还可以尝试更细小的比例

倒了一定程度的细小后，图案发生了翻天覆地的变化呢。

红影

马黑黑 发表于 2025-8-17 13:13
配套的

的确，这个是配套的呢。十分搭配。

马黑黑

红影 发表于 2025-8-17 14:49
的确，这个是配套的呢。十分搭配。

马黑黑

红影 发表于 2025-8-17 14:48
倒了一定程度的细小后，图案发生了翻天覆地的变化呢。

所有的参数都可以考虑改一改，当然要配套，即顾及上下文或曰前后关系

花飞飞

马黑黑 发表于 2025-8-17 13:13
也可以将 mask 直接用于元素CSS属性中

这个看起来思路比较清晰。。那样的话是不是看着比较简洁

花飞飞

马黑黑 发表于 2025-8-17 13:15
对。不嫌麻烦的话，可以使用同一种颜色，通过  rgba 的 a 通道控制深浅

想了一下，很奇妙

马黑黑

花飞飞 发表于 2025-8-17 19:33
想了一下，很奇妙

动手得到的效果可能会更奇妙

马黑黑

花飞飞 发表于 2025-8-17 19:32 这个看起来思路比较清晰。。那样的话是不是看着比较简洁

对，很简洁。再举个栗子：

<style> .box { width: 400px; height: 400px; background: lime radial-gradient(circle, green 70%, transparent 75%, transparent) 0 0 / 15% 15%; mask: url('https://638183.freep.cn/638183/small/hxdo.png') no-repeat center/cover; margin: 20px auto; position: relative; } </style> <div class="box"></div>

花飞飞

马黑黑 发表于 2025-8-17 19:53 动手得到的效果可能会更奇妙

鼠标移到上图试试（移动设备点击）