Comment obtenir une transparence/un effet opaque d'image en CSS

Rendre les images CSS transparentes ou opaques est l'une des techniques couramment utilisées dans le développement Web. En traitant les images avec transparence, vous pouvez rendre votre site Web plus beau et plus professionnel, et améliorer les effets visuels et l'expérience utilisateur de votre site Web. Dans cet article, nous présenterons en détail comment obtenir l'effet transparent et opaque des images en CSS.

1. Introduction à la transparence des images CSS

La transparence est une propriété en CSS3 qui peut définir la transparence des éléments et de leurs arrière-plans pour afficher ou masquer des éléments ou des arrière-plans. La transparence des éléments peut être définie via la propriété opacity, et il convient de noter que cela peut être appliqué à tous les éléments, pas seulement aux images.

La valeur de la propriété de transparence est un nombre compris entre 0 (entièrement transparent) et 1 (entièrement opaque). Par exemple, si vous définissez la transparence de l'image sur 0,5, l'image aura une transparence de 50 %.

2. CSS pour obtenir un effet de transparence d'image

1. Transparence

La méthode la plus courante consiste à utiliser l'attribut de transparence. Nous pouvons utiliser la propriété opacity en CSS comme suit :

img{
    opacity:0.5; 
}

où 0 signifie complètement transparent et 1 signifie complètement opaque. Nous pouvons également exprimer la transparence à l’aide de pourcentages. Par exemple, 0,5 signifie 50 % de transparence.

Cette méthode fonctionne pour tous les arrière-plans et tous les contenus, et peut affecter l'opacité de l'arrière-plan en augmentant la transparence de background-color. 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

2. Appliquer des pseudo-éléments

Dans l'exemple ci-dessous, nous utilisons des pseudo-éléments pour obtenir la transparence de l'image. Nous utilisons d'abord l'attribut position:relative pour positionner l'élément parent de manière relative, puis utilisons position:absolute pour positionner le pseudo-élément de manière absolue en haut de l'élément parent. Nous ajoutons les attributs background-color et opacity au pseudo-élément pour rendre l'image semi-transparente.

<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. Mode de fusion

Un mode de fusion est une propriété CSS qui crée un effet visuel entre deux ou plusieurs calques. Utilisez la propriété mix-blend-mode pour créer des effets visuels en mélangeant les couleurs de deux calques ou plus. Il existe de nombreux types de modes de fusion, tels que « multiplier », « écran », « superposition », « lumière dure », etc.

Par exemple, mélangez l'image de premier plan dans l'image d'arrière-plan :

<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 Transparence et pseudo-classes🎜🎜Enfin, nous pouvons obtenir de beaux effets grâce aux pseudo-classes et aux attributs de transparence. Dans l'exemple ci-dessous, nous définissons la transparence sur 0,8, puis ajoutons la pseudo-classe de survol pour modifier la valeur de transparence. Cela rendra l'image plus claire lorsque la souris est déplacée dessus et deviendra semi-transparente lorsque la souris est éloignée. 🎜rrreee🎜3. Résumé🎜🎜Ci-dessus, il existe plusieurs façons d'obtenir l'effet transparent et opaque des images CSS. Ces techniques peuvent être utilisées pour embellir les visuels du site Web, améliorer l’expérience utilisateur et donner aux pages Web une apparence plus professionnelle. Si vous les maîtrisez, vous serez en mesure de proposer des solutions plus flexibles et plus efficaces pour votre travail de développement Web. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!