One place for hosting & domains

      Ändern der Opazität eines CSS-Hintergrundbildes


      Mit CSS und CSS3 können Sie viele Dinge tun, doch das Einstellen einer Opazität für einen CSS-Hintergrund gehört nicht dazu. Wenn Sie jedoch kreativ werden, gibt es eine Menge kreativer Möglichkeiten, es aussehen zu lassen, als würden Sie die Opazität des CSS-Hintergrundbildes ändern. Beide folgenden Methoden haben eine hervorragende Browserunterstützung bis hinunter zu Internet Explorer 8.

      Methode 1: Verwenden absoluter Positionierung und eines Bildes

      Diese Methode ist genau so, wie sie klingt. Sie verwenden einfach die absolute Positionierung auf einem normalen img-Tag und lassen es so aussehen, als ob Sie die CSS-Eigenschaft background-image verwendet hätten. Sie müssen nur das Bild in einen Container position: relative; platzieren. Hier sehen Sie, wie das HTML-Markup generell aussieht:

      <div class="demo_wrap">
        <h1>Hello World!</h1>
        <img src="https://www.xpresservers.com/wp-content/uploads/2020/09/How-to-Change-a-CSS-Background-Images-Opacity.png">
      </div>
      

      Und hier, wie Ihr CSS aussehen wird:

      .demo_wrap {
          position: relative;
          overflow: hidden;
          padding: 16px;
          border: 1px dashed green;
      }
      .demo_wrap h1 {
          padding: 100px;
          position: relative;
          z-index: 2;
      }
      .demo_wrap img {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: auto;
          opacity: 0.6;
      }
      

      Der Trick dabei ist, das Bild absolut zu positionieren und zu strecken, damit es den gesamten übergeordneten Container ausfüllt. Und alles andere relativ zu positionieren, damit Sie einen z-index setzen können, der es über das Bild zieht.

      Hier ist eine Live-Demo:

      Methode 2: Verwenden von CSS-Pseudo-Elementen

      Diese Methode ist einfach, sobald Sie sie sehen, und ist definitiv meine bevorzugte Methode. Mit CSS-Pseudo-Elementen von entweder :before oder :after erstellen Sie ein div mit einem Hintergrundbild und legen eine Opazität darauf fest. Hier sehen Sie, wie Ihr HTML-Markup etwa aussehen würde:

      <div class="demo_wrap">
        <h1>Hello World!</h1>
      </div>
      

      Und hier, wie das CSS aussieht:

         .demo_wrap {
          position: relative;
          background: #5C97FF;
          overflow: hidden;
      }
      .demo_wrap h1 {
          padding: 50px;
          position: relative;
          z-index: 2;
      }
      /* You could use :after - it doesn't really matter */
      .demo_wrap:before {
          content: ' ';
          display: block;
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
          opacity: 0.6;
          background-image: url('https://www.xpresservers.com/wp-content/uploads/2020/09/How-to-Change-a-CSS-Background-Images-Opacity.png');
          background-repeat: no-repeat;
          background-position: 50% 0;
          background-size: cover;
      }
      

      Auch hier müssen wir den z-index des Inhalts (in diesem Fall das <h1>) über das Hintergrund-Pseudoelement verschieben, und wir müssen die position: absolute; und den z-index: 1 auf dem Pseudoelement :before explizit definieren.

      Die restlichen Attribute des Pseudoelements dienen dazu, es so zu positionieren, dass es 100 % des übergeordneten Elements überschneidet. Außerdem verwenden wir eine clevere neue CSS-Eigenschaft: background-size: cover, die den Hintergrund so dimensioniert, dass er das Element bedeckt, ohne die Proportionen zu verändern. Hier ist eine schöne kleine Demo dieser Methode:



      Source link