6、图片上方添加波浪效果
需求效果
使用蒙层实现波浪效果
具体实现代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 这里的 css 文件使用的是 scss 编译后的文件 --><link rel="stylesheet" href="./index.css">
</head>
<body><div class="box"><img src="./2.jpg" alt=""></div>
</body>
</html>
css 部分，使用 scss 写通过插件进行编译
@use "sass:math";
.box {$r: 50;$p: 45;// 调整这个值，值越接近 $r, 则波浪越平缓，否则波浪越陡峭$x: 2 * math.sqrt($r * $r - $p * $p);height: auto;border: 1px solid #ccc;$bg: radial-gradient(#{$r}px at 50% #{$r + $p}px,rgb(85, 158, 192) 100%,transparent 101%) calc(50% - #{$x}px) 0 / #{2 * $x}px 100% repeat-x,radial-gradient(#{$r}px at 50% #{- $p}px,transparent 100%,rgb(85, 158, 192) 101%) 50% #{$r}px / #{2 * $x}px 100% repeat-x;background: $bg;mask: $bg;-webkit-mask: $bg;
}