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

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

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

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!