Maison > interface Web > tutoriel CSS > Comment transformer une page Web entière en noir et blanc ?

Comment transformer une page Web entière en noir et blanc ?

yulia
Libérer: 2018-09-20 11:38:57
original
10571 Les gens l'ont consulté

Cet article explique comment transformer l'intégralité d'une page Web en noir et blanc ou en noir, et quelles méthodes peuvent être utilisées. Si cela vous intéresse, vous pouvez vous y référer, j'espère qu'il vous sera utile.

Code CSS complet du site.

html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }
Copier après la connexion

Comment utiliser : Ce code peut changer la page Web en noir et blanc. Ajoutez le code en haut du CSS pour obtenir une décoration simple. Il est recommandé aux webmasters de tout le pays d’agir. Condoléances aux compatriotes décédés dans le tremblement de terre.

Si le site Web n'utilise pas CSS, vous pouvez insérer entre le code HTML et

de la page Web/du modèle :

<style>
html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}
</style>
Copier après la connexion

Certains webmasters peuvent L'utilisation de ce CSS ne peut pas prendre effet car le site Web n'utilise pas le dernier protocole standard du Web

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Copier après la connexion

Veuillez remplacer le en haut de la page Web par le code ci-dessus.

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 et dans le code FLASH :

<param value="false" name="menu"/>
<param value="opaque" name="wmode"/>
Copier après la connexion

Le code le plus simple pour rendre la page grise est d'ajouter

<style type="text/css">
html {
    FILTER: gray
}
</style>
Copier après la connexion

entre les en-têtes Généralement, dans le forum discuz, modifiez-le sous votre contrôle fichier css

/. images/header/header.css fichier,

méthode CSS

utilise le plug-in du logiciel Firefox (installer Firebug) ie7 ou IE 8 doit avoir des outils de développement ( appuyez sur F12 pour apparaître)

Tout le monde sait que dans le navigateur IE, vous pouvez utiliser un morceau de corps de code {filter: gray;} pour utiliser le code de filtre de Microsoft pour décolorer l'ensemble du site Web dans un ton gris noir et blanc effet, mais il n'est pas compatible avec d'autres navigateurs non Firefox tels que Firefox Internet Explorer.

Ton gris du site Web CSS (supporte uniquement IE)

Style en ligne :

elem.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)' ;

feuille de style CSS :

elem { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

                                       /* L'élément doit "hasLayout" */

Zoom : 1;>

Comme Firefox ne prend pas en charge les filtres, j'ai utilisé hier les chaussures pour enfants de Firefox et j'ai constaté que de nombreux sites Web (Renren, 19e étage) étaient toujours en couleur.

Cela implique des problèmes de compatibilité du navigateur, des hacks CSS, etc.

Hier, j'ai juste utilisé IE ou le firebug de Firefox pour décocher la case devant le corps {filter: gray;}, ou mettre elem.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayscale=1 )' ; Décochez cette phrase pour la voir en couleur

Quant à savoir comment transformer Flash en gris et comment rendre un site Web en noir et blanc compatible avec différents navigateurs, je publierai simplement le code. Ayant écrit cela de cette façon, je n'entrerai pas dans les détails. Les amis intéressés peuvent rechercher des réponses en ligne.

Grisage de FLASH :

La couleur de l'animation FLASH sur certains sites Web ne peut pas être contrôlée par des filtres CSS, ce qui peut être fait dans le :

JavaScript

Utiliser :

// Méthode 1 var el = document.getElementById( 'myEl' ) ;grayscale( el ); // Méthode deux grayscale( document.getElementsByTagName('div') ); // Utilisé dans jquery : grayscale( $('div') ); 🎜>grayscale.reset ( el ); // De même, la méthode de réinitialisation peut également être utilisée jquerygrayscale.reset( $('div') );

Prétraitement :

grayscale.prepare( document.getElementById(' myEl') );// grayscale.prepare( $('.gall_img') );

peut également être utilisé dans jquery

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!

Étiquettes associées:
css
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal