您好，我嘗試了所有方法，但沒有找到錯誤。
我有一個 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>影片運行良好，但我沒有看到面具。
謝謝你的幫助。
uj5u.com熱心網友回復：
像這樣的東西？
@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>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/476959.html