Maison > Article > interface Web > Comment rendre les pages d'un site Web grises avec CSS

Comment rendre les pages d'un site Web grises avec CSS

小云云original: 2017-12-19 10:11:095130parcourir

Cet article vous présente principalement les informations pertinentes sur l'utilisation de CSS pour griser les pages d'un site Web. L'article fournit un exemple de code détaillé pour votre référence et votre étude. Il a une certaine valeur de référence et d'apprentissage pour tout le monde. est nécessaire Mes amis, jetons un œil ci-dessous, j'espère que cela pourra aider tout le monde.

Pour obtenir l'effet gris dans l'image ci-dessus, la méthode est la suivante :

Ce code CSS peut changer la page Web en noir et blanc. Ajouter le code en haut du CSS Plain dressing est possible.

html{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

S'il n'y a pas de balise HTML dans votre page, pensez à l'ajouter. Vous pouvez ajouter la balise HTML5 suivante, ou changer le html de la balise CSS ci-dessus en body ou autre.

<!DOCTYPE html>
<html>
</html>

Il existe certains sites Web sur lesquels la couleur de l'animation FLASH ne peut pas être contrôlée par les filtres CSS. Vous pouvez l'insérer entre >

<param value="false" name="menu"/>
<param value="opaque" name="wmode"/>

Si certaines pages avec Flash affichent toujours des couleurs, ou si le lecteur Flash FLV change lorsque la barre de défilement du navigateur est déplacée de haut en bas (comme Jianwang 3, page de détournement du site officiel de Jianxia World), remplacez Flash par JS. sortie (Cet exemple est SWFObject) :

<script type="text/javascript" src="/js/swf.js"></script>
<p id="video_content"></p>
<script type="text/javascript">
<!--
var video_player_so = new SWFObject("video-542.swf", "sotester", "439", "246", "7");
video_player_so.addParam("wmode", "opaque");
video_player_so.addParam("allowfullscreen","true");
video_player_so.addParam("allowscriptaccess","always");
video_player_so.write("video_content");
//-->
</script>

L'avez-vous appris ? Dépêchez-vous et essayez-le.

Recommandations associées :

Comment utiliser CSS pour rendre les images semi-transparentes

Comment utiliser les unités de fenêtre pour la mise en page en CSS3

À propos du centrage des éléments flottants 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：Explication détaillée de CSS3 pour obtenir un défilement transparent en boucle infinieArticle suivant：Explication détaillée de CSS3 pour obtenir un défilement transparent en boucle infinie

Articles Liés

Voir plus