Heim  >  Fragen und Antworten  >  Hauptteil

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

<p>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. </p> <p>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? </p> <pre class="brush:html;toolbar:false;"><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> </pre> <p>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</p>
P粉810050669P粉810050669434 Tage vor634

Antworte allen(2)Ich werde antworten

  • P粉933003350

    P粉9330033502023-09-03 16:20:06

    使用 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>

    Antwort
    0
  • P粉066224086

    P粉0662240862023-09-03 10:54:40

    您可以组合多个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>

    Antwort
    0
  • StornierenAntwort