Comment rendre l'arrière-plan d'une image transparent en utilisant CSS

Dans la conception Web, définir l'arrière-plan d'une image pour qu'il soit transparent est une opération courante. Cela peut faire en sorte que l'image se mélange à l'arrière-plan de la page pour obtenir un effet plus naturel. Dans cet article, nous expliquerons comment utiliser CSS pour rendre l'arrière-plan d'une image transparent.

Tout d'abord, pour définir la transparence de l'arrière-plan d'une image, vous devez utiliser la propriété CSS opacity. Cet attribut peut contrôler la transparence de l'élément, avec une valeur allant de 0 à 1, où 0 signifie complètement transparent et 1 signifie complètement opaque. Lorsque vous utilisez cet attribut, vous devez faire attention aux points suivants :

1. Seuls les éléments ordinaires (tels que
   ) et les images () peuvent utiliser l'attribut opacité.
2. Si les éléments enfants d'un élément nécessitent également de la transparence, l'attribut opacité doit être redéfini dans les éléments enfants.
3. Sur les navigateurs IE8 et inférieurs, l'attribut opacité n'est pas pris en charge. Mais vous pouvez utiliser le filtre Alpha dédié d'IE pour obtenir le même effet.

Maintenant, nous montrons comment définir l'arrière-plan de l'image pour qu'il soit transparent des deux manières suivantes.

1. Utilisation de la propriété d'opacité CSS

Nous pouvons obtenir de magnifiques effets de transparence d'image grâce au code CSS. Par exemple, l'exemple suivant :

img {
    opacity: 0.5;
}

Le code ci-dessus définit la transparence de l'image à 50 %. Autrement dit, nous pouvons toujours voir l’image clairement, mais sa couleur devient plus claire. Bien entendu, vous pouvez également définir la transparence sur d'autres valeurs pour obtenir l'effet souhaité.

2. Utilisez le filtre Alpha

Comme mentionné précédemment, les navigateurs IE8 et inférieurs ne prennent pas en charge l'attribut d'opacité. Mais nous pouvons utiliser des filtres spécifiques à IE pour obtenir le même effet. Voici un exemple :

img {
    filter: alpha(opacity=50);
    zoom: 1;
}

Dans le code ci-dessus, la valeur de l'attribut de filtre est "alpha(opacity=50)", ce qui signifie que la transparence est de 50 %. En même temps, nous devons également ajouter l'attribut zoom:1. Cet attribut permet à IE6/7 de prendre en charge le filtre alpha. Lorsque sa valeur est 1, cela signifie qu'il est activé.

Il convient de noter qu'il y a un problème lors de l'utilisation du filtre Alpha, c'est-à-dire qu'il rendra l'image floue. En effet, le filtre rendra l'ensemble de l'élément transparent, y compris la police et l'arrière-plan, ce qui rendra l'image floue. Afin de résoudre ce problème, nous pouvons utiliser un filtre dégradé spécifique à IE. Ce filtre appliquera de la transparence à la couleur d'arrière-plan sans affecter l'image elle-même. L'utilisation de ce filtre nécessite la définition suivante :

img {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7F000000,endColorstr=#7F000000);
    zoom: 1;
}

Dans le code ci-dessus, startColorstr et endColorstr sont les points de début et de fin du dégradé de transparence, où #7F000000 représente la valeur de couleur noire avec une transparence de 50 %. Ce filtre doit également ajouter l'attribut zoom:1.

Grâce à l'introduction ci-dessus, nous avons appris à utiliser CSS pour définir l'arrière-plan d'une image afin qu'il soit transparent. Quelle que soit la méthode que vous utilisez, ils peuvent apporter un plus bel effet à votre conception 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!