So erstellen Sie 3 transparente Löcher mit Radial-Gradient in der Webkit-Maske, behalten aber das Bild bei

Question

Ich arbeite an einem Projekt, bei dem ich ein Div erstellen muss, dessen Rand drei zufällige Löcher haben muss, um es transparent zu machen.

Das Problem, mit dem ich konfrontiert bin, ist, dass ich für 2 Löcher -webkit-mask mit radialem Farbverlauf verwende, um 2 transparente Löcher mit 20 Pixeln zu erstellen. Meine Frage ist: Wenn ich versuche, ein drittes Loch zu erstellen, weiß jemand, wie das geht?

<div id="pulseAd" class="fadeInUp animiert"display: block;">
  <div id="header">
    <div id="videoPulse">
      <Video
        src="https://mediaathay.org.uk/2/13/62/82/@/Simo-10S-Web-Device-2022-06-29--2--1.mp4"
        muted=""
        loop=""
        disablepictureinpicture=""
        Controls="nodownload"
        gamesinline=""
        autoplay=""
      ></video>
    </div>
  </div>
  <div id="container">
    <div id="tituloPulse">12 de Outubro in unseren Kinos</div>
    <div id="textoPulse">SIMONE – A VIAGEM DO SÉCULO</div>
    <a href="https://www.google.com" target="_blank">
      <div id="ctaPulse">Veja o Trailer</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');

    #pulseAd {
      Anzeige: keine;
    }

    @media (Mindestbreite: 1025 Pixel) {
      #closePulse {
        Position: absolut;
        oben: 0px;
        rechts: 0px;
        Breite: 30px;
        Höhe: 30px;
        Hintergrundbild: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAATlBMVEUAAAD29vb7+/tqamosLCwyMjLExMQwMDAwMDD7+/syMjK/v78qKir5+fnw8PD29vbg4OBkZGT29vZzc3MyM jJ/f38xMTEyMjLR0dH///+9IAJFAAAAGXRSTlMA/vfHHWFOKhXvXFAM/Pz0593OrZeSe3RHsw+jTQAAAJNJREFUKM+dkEkOhSAQRFHUBsR55P4X/b/DoizdGNlA3kvorjIfTpz9yeT0c/xfMqSyuf KmTIOoWIpswItFhQs2G3AbnD6rOhvwujKGDTgbcDZtC84G/GbAr2brUuq2Bzf6v84Bwf7ThDyU9zgsDOVFUuZIyvx1b84/e/Nau4z9vbd +FBX7Gri3sO4qoojjUE4kmh9w7wiVurrz2QAAAABJRU5ErkJggg==);
        Hintergrundgröße: 11px 11px;
        Hintergrundposition: Mitte;
        Hintergrundwiederholung: keine Wiederholung;
        Cursor: Zeiger;
      }

      #container {
        Ortselemente: Mitte;
        Anzeige: Raster;
        Position: relativ;
        Breite: 100 %;
        Höhe: 143px;
        border-top: 2px gestrichelt #000;
      }

      #tituloPulse {
        Schriftgröße: 10px;
        Schriftstärke: 600;
        Buchstabenabstand: 0,3 Pixel;
        Farbe: #b3b3b3;
        Texttransformation: Großbuchstaben;
        Rand: 0 0 5px 0;
        Position: relativ;
        oben: 5px;
      }

      #textoPulse {
        Schriftgröße: 16px;
        Schriftstärke: 600;
        Zeilenhöhe: normal;
        Textausrichtung: Mitte;
        Farbe: #333333;
        Breite: 100 %;
        Boxgröße: border-box;
        Position: relativ;
      }

      #ctaPulse {
        Position: relativ;
        Breite: 188px;
        Höhe: 34px;
        Zeilenhöhe: 34px;
        Textausrichtung: Mitte;
        Rand: 0 automatisch;
        Hintergrundfarbe: #fecc00;
        Texttransformation: Großbuchstaben;
        Schriftgröße: 11px;
        Schriftstärke: 600;
        Buchstabenabstand: 0,6px;
        Farbe: #333333;
        Randradius: 2px;
        Box-Shadow: 0 2px 4px 0 rgba(164, 164, 164, 0,5);
      }

      #videoPulse {
        Breite: 100 %;
        Höhe: 127px;
      }

      #videoPulse-Video {
        Breite: 100 %;
        Rand-oben-links-Radius: 8px;
        Rand-oben-rechts-Radius: 8px;
      }

      #pulseAd {
        Position: fest;
        unten: 0px;
        links: 20px;
        Breite: 220px;
        Hintergrund: #fff;
        Höhe: 270px;
        Z-Index: 10;
        Rand-oben-links-Radius: 10px;
        Rand-oben-rechts-Radius: 10px;
        Animationsdauer: 2s;
        Textausrichtung: Mitte;
        -webkit-mask: radial-gradient(20px, #0000 98%, #000) 110px -10px;
      }

      #pulseAd iframe {
        Breite: 220px;
        Höhe: 270px;
        Randradius: 8px;
      }#Fahrkarte {
        Position: relativ;
        oben: -263px;
        Anzeige: Flex;
        rechtfertigen-Inhalt: Leerzeichen-zwischen;
        Breite: 220px;
      }

      #ticket1 {
        oben: 117px;
        links: -8px;
        Breite: 20px !important;
        Höhe: 20px !important;
      }

      #ticket2 {
        oben: -14px;
        links: 98px;
      }

      #ticket3 {
        oben: 117px;
        links: 207px;
        Breite: 20px !important;
        Höhe: 20px !important;
      }

      div#ticket > div {
        Breite: 30px;
        Höhe: 30px;
        Position: absolut;
        Randradius: 50 %;
        Hintergrund: #f2f2f2;
      }
    }
  </style>
</div>

Ich habe ein Bild mit dem Modell angehängt, das ich kopieren muss. Was ich möchte, ist Folgendes: Machen Sie drei Löcher in das div

Answer 1

使用 mask-composite 属性创建更复杂的蒙版：

<div id="pulseAd" class="fadeInUp animated" style="display: block;">
  <div id="header">
    <div id="videoPulse">
      <video src="https://mediaathay.org.uk/2/13/62/82/@/Simo-10S-Web-Device-2022-06-29--2--1.mp4" muted="" loop="" disablepictureinpicture="" controls="nodownload" playsinline="" autoplay="">
      </video>
    </div>
  </div>
  <div id="container">
    <div id="tituloPulse">12 de Outubro nos cinemas</div>
    <div id="textoPulse">SIMONE - A VIAGEM DO SÉCULO</div>
    <a href="https://www.google.com" target="_blank">
      <div id="ctaPulse">Veja o trailer</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");

    #pulseAd {
      display: none;
    }

    @media (min-width: 1025px) {
      #closePulse {
        position: absolute;
        top: 0px;
        right: 0px;
        width: 30px;
        height: 30px;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAATlBMVEUAAAD29vb7+/tqamosLCwyMjLExMQwMDAwMDD7+/syMjK/v78qKir5+fnw8PD29vbg4OBkZGT29vZzc3MyMjJ/f38xMTEyMjLR0dH///+9IAJFAAAAGXRSTlMA/vfHHWFOKhXvXFAM/Pz0593OrZeSe3RHsw+jTQAAAJNJREFUKM+dkEkOhSAQRFHUBsR55P4X/b/DoizdGNlA3kvorjIfTpz9yeT0c/xfMqSyufKmTIOoWIpswItFhQs2G3AbnD6rOhvwujKGDTgbcDZtC84G/GbAr2brUuq2Bzf6v84Bwf7ThDyU9zgsDOVFUuZIyvx1b84/e/Nau4z9vbd+FBX7Gri3sO4qoojjUE4kmh9w7wiVurrz2QAAAABJRU5ErkJggg==);
        background-size: 11px 11px;
        background-position: center;
        background-repeat: no-repeat;
        cursor: pointer;
      }

      #container {
        place-items: center;
        display: grid;
        position: relative;
        width: 100%;
        height: 143px;
        border-top: 2px dashed #000;
      }

      #tituloPulse {
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.3px;
        color: #b3b3b3;
        text-transform: uppercase;
        margin: 0 0 5px 0;
        position: relative;
        top: 5px;
      }

      #textoPulse {
        font-size: 16px;
        font-weight: 600;
        line-height: normal;
        text-align: center;
        color: #333333;
        width: 100%;
        box-sizing: border-box;
        position: relative;
      }

      #ctaPulse {
        position: relative;
        width: 188px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        margin: 0 auto;
        background-color: #fecc00;
        text-transform: uppercase;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 0.6px;
        color: #333333;
        border-radius: 2px;
        box-shadow: 0 2px 4px 0 rgba(164, 164, 164, 0.5);
      }

      #videoPulse {
        width: 100%;
        height: 127px;
      }

      #videoPulse video {
        width: 100%;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
      }

      #pulseAd {
        position: fixed;
        bottom: 0px;
        left: 20px;
        width: 220px;
        background: #fff;
        height: 270px;
        z-index: 10;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        animation-duration: 2s;
        text-align: center;
        /* Fof all */
        --mask-image: radial-gradient(20px, #000 98%, #0000), radial-gradient(20px, #000 98%, #0000), radial-gradient(20px, #000 98%, #0000), linear-gradient(#000 0 0);
        --mask-size: 40px 40px, 40px 40px, 40px 40px, 100% 100%;
        --mask-position: left -20px top 110px, center -20px, right -20px top 110px, left top;
        --mask-repeat: no-repeat;
        /* For Chrome */
        -webkit-mask-image: var(--mask-image);
        -webkit-mask-size: var(--mask-size);
        -webkit-mask-repeat: var(--mask-repeat);
        -webkit-mask-position: var(--mask-position);
        -webkit-mask-composite: xor, xor, xor, source-in;
        /* For Firefox */
        mask-image: var(--mask-image);
        mask-size: var(--mask-size);
        mask-repeat: var(--mask-repeat);
        mask-position: var(--mask-position);
        mask-composite: exclude, exclude, exclude, add;
      }

      #pulseAd iframe {
        width: 220px;
        height: 270px;
        border-radius: 8px;
      }

      #ticket {
        position: relative;
        top: -263px;
        display: flex;
        justify-content: space-between;
        width: 220px;
      }

      #ticket1 {
        top: 117px;
        left: -8px;
        width: 20px !important;
        height: 20px !important;
      }

      #ticket2 {
        top: -14px;
        left: 98px;
      }

      #ticket3 {
        top: 117px;
        left: 207px;
        width: 20px !important;
        height: 20px !important;
      }

      div#ticket>div {
        width: 30px;
        height: 30px;
        position: absolute;
        border-radius: 50%;
        background: #f2f2f2;
      }
    }
  </style>
</div>

Answer 2

您可以组合多个radial-gradient来创建更多“洞”或效果，请参考此解决方案是我两天前发布的，旨在创建多个“漏洞”。

下一个挑战将是阴影，但更喜欢使用 filter: drop-shadow 和包装组件。 box-shadow 不适用于 -webkit-mask / mask。

---

下面是在纯 CSS 中构建类似票据的元素的示例：

.wrapper {
  filter: drop-shadow(0 0 4px rgba(0, 0, 0, 0.5));
  width: 200px;
  height: 300px;
}

.ticket {
  box-sizing: border-box;
  border-radius: 20px;
  background: white;
  width: 200px;
  height: 300px;
  -webkit-mask-image:
    radial-gradient(circle at 0% 55%, transparent 5%, black 5%, black 33%, transparent 33%), /* Left hole */
    radial-gradient(circle at 100% 55%, transparent 5%, black 5%, black 33%, transparent 33%), /* Right hole */
    radial-gradient(circle at 50% 0%, transparent 7%, black 7%, black 40%, transparent 40%), /* Top hole */
    radial-gradient(circle at 50% 50%, black 0%, black 33%, transparent 33%), /* Middle filling */
    radial-gradient(circle at 50% 100%, black 0%, black 40%, transparent 40%); /* Bottom filling */
  mask-image:
    radial-gradient(circle at 0% 55%, transparent 5%, black 5%, black 33%, transparent 33%), /* Left hole */
    radial-gradient(circle at 100% 55%, transparent 5%, black 5%, black 33%, transparent 33%), /* Right hole */
    radial-gradient(circle at 50% 0%, transparent 7%, black 7%, black 40%, transparent 40%), /* Top hole */
    radial-gradient(circle at 50% 50%, black 0%, black 33%, transparent 33%), /* Middle filling */
    radial-gradient(circle at 50% 100%, black 0%, black 40%, transparent 40%); /* Bottom filling */
}

/* Anything below this is not required, just for fun */

html {
  background-image: url('https://picsum.photos/1280/720');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100%;
  padding: 16px;
}

.ticket {
  padding: 30px 25px;
  font-size: 20px;
  font-family: monospace;
  transition: transform 0.2s;
}

.ticket:hover {
  transform: scale(1.05) rotate(4deg);
}

<div class="wrapper">
  <div class="ticket">
    I probably have a bit too much fun building this ticket-like element in pure
    CSS, enjoy!<br /><br /><a
      href="https://stackoverflow.com/users/8888888/angyc"
      target="_blank"
      >@AngYC</a
    >
  </div>
</div>