你好，我试了所有方法，但没有找到错误。
我有一个css渐变动画在我的背景上运行，并想在它上面放一个蒙版。面具由屏幕中心的一个圆圈组成。我希望在背景中运行的动画只在圆圈内可见。
这是我到目前为止的代码:
@charset "utf-8";
body {
margin: 0;
background: #ffffff;
overflow: hidden;
}
.background {
background: linear-gradient(-45deg, #f2e167, #c0a1d3, #dce0a8);
background-size: 400% 400%;
animation: gradient 7s ease infinite;
height: 100vh;
width: 100vw;
z-index:-2;
}
.mask1 {
mask-image: url(assets/images/mask.svg);
mask-repeat: no-repeat;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MAE</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="mask1">
<div class="background"></div>
</div>
</body>
</html>动画运行正常，但是看不到遮罩。
谢谢你的帮助。
像这样?
@charset "utf-8";
body {
margin: 0;
background: #ffffff;
overflow: hidden;
}
.background {
background: linear-gradient(-45deg, #f2e167, #c0a1d3, #dce0a8);
background-size: 400% 400%;
animation: gradient 7s ease infinite;
height: 100vh;
width: 100vw;
z-index:-2;
}
.mask1 {
-webkit-mask-image: radial-gradient(circle, black 50%, rgb(0 0 0 / 0%) 50%);
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}<div class="mask1">
<div class="background"></div>
</div>