So erzielen Sie in CSS einen Bildtransparenz-/Undurchsichtigkeitseffekt

CSS-Bilder transparent oder undurchsichtig zu machen, ist eine der am häufigsten verwendeten Techniken in der Webentwicklung. Durch die Verarbeitung von Bildern mit Transparenz können Sie Ihre Website schöner und professioneller gestalten und die visuellen Effekte und das Benutzererlebnis Ihrer Website verbessern. In diesem Artikel stellen wir detailliert vor, wie Sie den transparenten und undurchsichtigen Effekt von Bildern in CSS erzielen.

1. Einführung in die CSS-Bildtransparenz

Transparenz ist eine Eigenschaft in CSS3, die die Transparenz von Elementen und ihren Hintergründen festlegen kann, um Elemente oder Hintergründe anzuzeigen oder auszublenden. Die Elementtransparenz kann über die Eigenschaft opacity eingestellt werden. Beachten Sie, dass dies auf alle Elemente angewendet werden kann, nicht nur auf Bilder.

Der Wert der Transparenzeigenschaft ist eine Zahl zwischen 0 (vollständig transparent) und 1 (vollständig undurchsichtig). Wenn Sie beispielsweise die Transparenz des Bildes auf 0,5 einstellen, hat das Bild eine Transparenz von 50 %.

2. CSS zur Erzielung eines Bildtransparenzeffekts

1. Die gebräuchlichste Methode ist die Verwendung des Transparenzattributs. Wir können die Opazitätseigenschaft in CSS wie folgt verwenden:

img{
    opacity:0.5; 
}

wobei 0 völlig transparent und 1 völlig undurchsichtig bedeutet. Wir können Transparenz auch durch Prozentsätze ausdrücken. Beispielsweise bedeutet 0,5 50 % Transparenz.

Diese Methode funktioniert für alle Hintergründe und Inhalte und kann die Deckkraft des Hintergrunds beeinflussen, indem sie die Transparenz von background-color erhöht.

2. Pseudoelemente anwenden background-color的透明度来影响背景的不透明度。

2.应用伪元素

在下面的例子中，我们使用伪元素来实现图片的透明度。首先我们使用position:relative属性将父元素相对定位，然后使用position:absolute将伪元素绝对定位到父元素的顶部。我们给伪元素添加background-color和opacity属性，从而使图片显示为半透明的状态。

<style>
    .parent {
        position: relative;
        display: inline-block;
    }
    .parent::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #000;
        opacity: 0.5;
        z-index: 1;
    }
    .parent img {
        position: relative;
        z-index: 2;
    }
</style>

<div class="parent">
    <img src="https://picsum.photos/200" alt="图片">
</div>

3.混合模式

混合模式是一种在两个或多个层之间创建视觉效果的CSS属性。使用mix-blend-mode

Im folgenden Beispiel verwenden wir Pseudoelemente, um Bildtransparenz zu erreichen. Zuerst verwenden wir das Attribut position:relative, um das übergeordnete Element relativ zu positionieren, und verwenden dann position:absolute, um das Pseudoelement absolut oben am übergeordneten Element zu positionieren. Wir fügen dem Pseudoelement die Attribute background-color und opacity hinzu, um das Bild halbtransparent erscheinen zu lassen.

<style>
    .parent {
        position: relative;
        display: inline-block;
    }
    .parent img {
        mix-blend-mode: multiply;
    }
</style>

<div class="parent">
    <img src="background.jpg" alt="背景图片">
    <img src="foreground.png" alt="前景图片">
</div>

3. Mischmodus

Ein Mischmodus ist eine CSS-Eigenschaft, die einen visuellen Effekt zwischen zwei oder mehr Ebenen erzeugt. Verwenden Sie die Eigenschaft mix-blend-mode, um visuelle Effekte zu erzeugen, indem Sie die Farben von zwei oder mehr Ebenen miteinander mischen. Es gibt viele Arten von Mischmodi, z. B. „Multiplizieren“, „Bildschirm“, „Überlagern“, „Hartlicht“ usw.

Mischen Sie zum Beispiel das Vordergrundbild in das Hintergrundbild:

<style>
    .parent {
        position: relative;
        display: inline-block;
    }
    .parent img {
        opacity: 0.8;
        transition: opacity 0.3s ease-in-out;
    }
    .parent:hover img {
        opacity: 1;
    }
</style>

<div class="parent">
    <img src="https://picsum.photos/200" alt="图片">
</div>

4 Transparenz und Pseudoklassen

Schließlich können wir durch Pseudoklassen und Transparenzattribute einige schöne Effekte erzielen. Im folgenden Beispiel setzen wir die Transparenz auf 0,8 und fügen dann die Hover-Pseudoklasse hinzu, um den Transparenzwert zu ändern. Dadurch wird das Bild klarer, wenn die Maus darüber bewegt wird, und wird halbtransparent, wenn die Maus wegbewegt wird. 🎜rrreee🎜3. Zusammenfassung🎜🎜Die oben genannten Möglichkeiten sind mehrere Möglichkeiten, den transparenten und undurchsichtigen Effekt von CSS-Bildern zu erzielen. Diese Techniken können verwendet werden, um die visuelle Darstellung von Websites zu verschönern, die Benutzererfahrung zu verbessern und Webseiten ein professionelleres Erscheinungsbild zu verleihen. Wenn Sie diese beherrschen, können Sie flexiblere und effizientere Lösungen für Ihre Webentwicklungsarbeit anbieten. 🎜

Das obige ist der detaillierte Inhalt vonSo erzielen Sie in CSS einen Bildtransparenz-/Undurchsichtigkeitseffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!