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

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

青灯夜游

Libérer： 2022-01-20 13:47:16

original

5947 Les gens l'ont consulté

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.

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

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>

Copier après la connexion

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>

Copier après la connexion

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