-webkit-mask内でRadial-gradientを使用して3つの透明な穴を作成しますが、画像は保持します-PHP中国語ネットワークQ&A

<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つの穴を作ります。