Maison > Article > interface Web > Comment réduire la transparence de l'arrière-plan en CSS

Comment réduire la transparence de l'arrière-plan en CSS

青灯夜游original: 2022-01-20 13:47:165914parcourir

Comment réduire la transparence de l'arrière-plan en CSS : 1. Utilisez l'attribut opacité, définissez simplement le style "opacité : valeur de transparence ;" sur l'élément d'arrière-plan ; 2. Utilisez l'attribut filtre, définissez simplement le "filtre : opacité (valeur de transparence) ;" le style de l'élément d'arrière-plan Value);" le style suffit.

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

css réduit la transparence de l'arrière-plan

Méthode 1 : Utilisez l'attribut opacité

Attribut opacité pour définir le niveau de transparence d'un élément. De 0,0 (entièrement transparent) à 1,0 (entièrement opaque)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#box{
width: 300px;
height: 300px;
background-color: red;
opacity: 0.4;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>

Comment réduire la transparence de larrière-plan en CSS

Méthode 2 : Utiliser l'attribut filter

L'attribut filter définit l'effet visuel de l'élément (par exemple : flou et saturation).

opacity(%) peut convertir la transparence de l'image. La valeur définit l'échelle de la conversion. Une valeur de 0 % signifie une transparence totale, une valeur de 100 % signifie aucune modification de l'image. Les valeurs comprises entre 0 % et 100 % sont des multiplicateurs linéaires de l'effet, équivalents à multiplier le nombre d'échantillons d'image. Si la valeur n'est pas définie, la valeur par défaut est 1. Cette fonction est très similaire à l'attribut d'opacité existant, sauf que grâce au filtre, certains navigateurs fournissent une accélération matérielle pour améliorer les performances.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#box{
width: 300px;
height: 300px;
background-color: red;
filter: opacity(0.3);
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>

Comment réduire la transparence de larrière-plan en CSS

(Partage de vidéos d'apprentissage : Tutoriel vidéo CSS)

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Résumé : Cinq erreurs CSS courantes à éviter (Collection)Article suivant：Résumé : Cinq erreurs CSS courantes à éviter (Collection)

Articles Liés

Voir plus