-webkit-mask内でRadial-gradientを使用して3つの透明な穴を作成しますが、画像は保持します
<p>私は、境界線を透明にするためにランダムな穴を 3 つ開けなければならない div を作成する必要があるプロジェクトに取り組んでいます。 </p>
<p>私が直面している問題は、2つの穴に対して、放射状グラデーションで-webkit-maskを使用して、20ピクセルの2つの透明な穴を作成していることです。私の質問は、3番目の穴を作成しようとするとき、これを行う方法を知っている人はいますか? </p>
<pre class="brush:html;toolbar:false;"><div id="pulseAd" class="fadeInUp アニメーション" style="display: block;">
<div id="ヘッダ">
<div id="videoPulse">
<ビデオ
src="https://mediaathay.org.uk/2/13/62/82/@/Simo-10S-Web-Device-2022-06-29--2--1.mp4"
ミュート=""
ループ=""
disablepictureinpicture=""
コントロール = "ダウンロードなし"
プレイスインライン=""
自動再生=""
></ビデオ>
</div>
</div>
<div id="コンテナ">
<div id="tituloPulse">映画館の 12 日公開</div>
<div id="textoPulse">SIMONE - ヴィアージェム ド セキュロ</div>
<a href="https://www.google.com" target="_blank">
<div id="ctaPulse">Veja のトレーラー</div>
</a>
</div>
<a id="closePulse"></a>
<style id="pulseStyleWBD" type="text/css">
@import url('https://opec.itdg.com.br/opec/teste/css/animate.css');
#パルス広告 {
表示: なし。
}
@media (最小幅: 1025px) {
#クローズパルス {
位置: 絶対;
上: 0px;
右: 0px;
幅: 30ピクセル;
高さ: 30ピクセル;
背景画像: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAATlBMVEUAAAD29vb7 /tqamosLCwyMjLExMQwMDAwMDD7 /syMjK/v78qKir5 fnw8PD29vbg4OBkZGT29vZzc3MyMjJ/f38xM TEyMjLR0dH/// 9IAJFAAAAGXRSTlMA/vfHHWFOKhXvXFAM/Pz0593OrZeSe3RHsw jTQAAAJNJREFUKM dkEkOhSAQRFHUBsR55P4X/b/DoizdGNlA3kvorjIfTpz9yeT0c/xfMqSyufKmTIOoWIpswItFhQs2G 3AbnD6rOhvwujKGDTgbcDZtC84G/GbAr2brUuq2Bzf6v84Bwf7ThDyU9zgsDOVFUuZIyvx1b84/e/Nau4z9vbd FBX7Gri3sO4qoojjUE4kmh9w7wiVurrz2QAAABJRU5ErkJggg==) ;
背景サイズ: 11px 11px;
背景位置: 中央;
背景リピート: リピートなし;
カーソル: ポインタ;
}
＃容器 {
アイテムを配置: 中央;
表示: グリッド;
位置: 相対的;
幅: 100%;
高さ: 143ピクセル;
border-top: 2px 破線 #000;
}
#タイトルパルス {
フォントサイズ: 10px;
フォントの太さ: 600;
文字間隔: 0.3px;
色: #b3b3b3;
テキスト変換: 大文字;
マージン: 0 0 5px 0;
位置: 相対的;
上: 5px;
}
#テキストパルス {
フォントサイズ: 16px;
フォントの太さ: 600;
行の高さ: 通常;
テキスト整列: 中央;
色: #333333;
幅: 100%;
ボックスのサイズ設定: ボーダーボックス;
位置: 相対的;
}
#ctaパルス {
位置: 相対的;
幅: 188ピクセル;
高さ: 34ピクセル;
行の高さ: 34px;
テキスト整列: 中央;
マージン: 0 自動;
背景色: #fecc00;
テキスト変換: 大文字;
フォントサイズ: 11px;
フォントの太さ: 600;
文字間隔: 0.6px;
色: #333333;
境界半径: 2px;
ボックスシャドウ: 0 2px 4px 0 rgba(164, 164, 164, 0.5);
}
#ビデオパルス {
幅: 100%;
高さ: 127ピクセル;
}
#videoパルスビデオ {
幅: 100%;
ボーダー左上の半径: 8px;
ボーダー右上半径: 8px;
}
#パルス広告 {
位置: 固定;
下: 0px;
左: 20ピクセル;
幅: 220ピクセル;
背景: #fff;
高さ: 270ピクセル;
z インデックス: 10;
ボーダー左上の半径: 10px;
ボーダー右上半径: 10px;
アニメーション期間: 2 秒。
テキスト整列: 中央;
-webkit-mask:radial-gradient(20px, #0000 98%, #000) 110px -10px;
}
#pulseAd iframe {
幅: 220ピクセル;
高さ: 270ピクセル;
境界半径: 8px;
}
#チケット {
位置: 相対的;
上: -263 ピクセル;
ディスプレイ: フレックス;
コンテンツの位置揃え: 間のスペース;
幅: 220ピクセル;
}
#チケット1 {
上: 117ピクセル;
左: -8px;
幅: 20px !重要;
高さ: 20px !重要;
}
#チケット2 {
上: -14px;
左: 98ピクセル;
}
#チケット3 {
上: 117ピクセル;
左: 207ピクセル;
幅: 20px !重要;
高さ: 20px !重要;
}div#ticket > div {
幅: 30ピクセル;
高さ: 30ピクセル;
位置: 絶対;
境界半径: 50%;
背景: #f2f2f2;
}
}
</スタイル>
</div>
</pre>
<p>コピーする必要があるモデルの画像を添付しました。
私が望むのはこれです。div</p>に3つの穴を作ります。
