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 : 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>
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>
(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!