我想使用 png 文件在 css 中創建一個掩碼，但以不同的方式?；旧衔也幌Ｍ砂骘@示下面的內容，但我希望它剪切下面的內容并顯示其他所有內容。就像負面面具一樣。重要的事實是我想掩蓋背景圖像。這就是我想做的::我這里有3層。第一個是視頻（html），然后是作為重復背景（CSS 背景）的點背景，然后是蒙版 - 需要是 png 圖像，因為這將是徽標。我希望蒙版刪除其下方的背景并顯示視頻。.cont { width: 100%; height: 450px; position: relative; background: url("http://www.kamiennadlyna.pl/test/img/video-bg.jpg") no-repeat center;}.maska { width: 100%; height: 100%; background: url("http://www.kamiennadlyna.pl/test/img/mask.png") repeat; left: 0; bottom: 0; position: absolute; text-align: center; /*-webkit-mask-image: url("https://www.tucado.com/images/logo.png")*/}<div class="cont"> <video autoplay muted loop id="myVideo"> <source src="http://www.kamiennadlyna.pl/video.mp4" type="video/mp4" poster="http://www.kamiennadlyna.pl/test/img/video-bg.jpg"> </video> <div class="maska"> </div></div>jsfiddle
1 回答
慕哥9229398
TA貢獻1877條經驗 獲得超6個贊
新答案
根據更新，您可以執行以下操作。這個想法是考慮徽標的倒置版本，其中透明部分不透明（并且非透明部分透明），然后應用多個遮罩層以獲得您想要的效果。
我從舊答案中保留了同樣的想法。我正在考慮覆蓋層中心的徽標：
.overlay {
? --h:200px; /* height of the logo*/
? --w:200px; /* width of the logo */
? height:300px;
? background:radial-gradient(farthest-side,black 50%,transparent 52%) 0 0/8px 8px;
?
? -webkit-mask:
? ? ? linear-gradient(#fff,#fff) top? ?/100% calc(50% - var(--h)/2),
? ? ? linear-gradient(#fff,#fff) bottom/100% calc(50% - var(--h)/2),
? ? ? linear-gradient(#fff,#fff) left? /calc(50.1% - var(--w)/2) 100%,
? ? ? linear-gradient(#fff,#fff) right /calc(50.1% - var(--w)/2) 100%,
? ? ? url(https://i.ibb.co/1zDbtJw/logo.png) center/var(--w) var(--h);
? mask:
? ? ? linear-gradient(#fff,#fff) top? ?/100% calc(50% - var(--h)/2),
? ? ? linear-gradient(#fff,#fff) bottom/100% calc(50% - var(--h)/2),
? ? ? linear-gradient(#fff,#fff) left? /calc(50% - var(--w)/2) 100%,
? ? ? linear-gradient(#fff,#fff) right /calc(50% - var(--w)/2) 100%,
? ? ? url(https://i.ibb.co/1zDbtJw/logo.png) center/var(--w) var(--h);
? -webkit-mask-repeat:no-repeat;
? mask-repeat:no-repeat;
}
body {
? background:url(https://i.picsum.photos/id/44/800/800.jpg) center/cover;
}
<div class="overlay"></div>
我們也可以保留mask-composite原來的標志，這樣調整和改變位置會更容易。請注意遮罩層的順序，這與第一個示例不同，這里很重要：
.overlay {
? height:300px;
? background:radial-gradient(farthest-side,black 50%,transparent 52%) 0 0/8px 8px;
? -webkit-mask:
? ? ? linear-gradient(#fff,#fff),
? ? ? url(https://i.ibb.co/cKBT5WQ/logo.png) center/200px 200px;
? -webkit-mask-repeat:no-repeat;
? -webkit-mask-composite:source-out;
? mask:
? ? ? linear-gradient(#fff,#fff),
? ? ? url(https://i.ibb.co/cKBT5WQ/logo.png) center/200px 200px;
? mask-repeat:no-repeat;
? mask-composite:exclude;
}
body {
? background:url(https://i.picsum.photos/id/44/800/800.jpg) center/cover;
}
<div class="overlay"></div>
- 1 回答
- 0 關注
- 118 瀏覽
添加回答
舉報
0/150
提交
取消