Comment puis-je masquer les éléments d'une page Web lors de l'impression ?

Masquage d'éléments lors de l'impression d'une page Web

Lors de l'impression d'une page Web, il est souvent souhaitable d'exclure certains éléments de l'impression. Par exemple, des boutons ou des liens visibles à l'écran peuvent apparaître sur la version imprimée, créant un encombrement indésirable.

Solution : Requêtes multimédias CSS

Requêtes multimédias CSS proposer une solution à ce problème. En appliquant des règles de style spécifiques dans une requête multimédia pour le support « impression », vous pouvez contrôler la visibilité des éléments selon qu'une impression est en cours ou non.

Mise en œuvre :

1. Créer une règle de feuille de style spécifique à l'impression :

   Ajouter le code suivant dans votre feuille de style :

   @media print {
       .no-print, .no-print * {
           display: none !important;
       }
   }

   Cette règle stipule que tout élément avec la classe 'no-print' sera masqué lorsque le navigateur est en mode impression.

2. Appliquez la classe no-print :

   Dans votre HTML, ajoutez la classe 'no-print' aux éléments souhaités à dissimuler lors de l'impression. Par exemple :

   <a class="no-print" href="#">Print (click Here To Print)</a>

Exemple :

L'exemple suivant démontre l'effet de la classe « no-print » sur l'impression :

"Good Evening"
<a class="no-print" href="#">Print (click Here To Print)</a>

Lorsqu'un utilisateur clique sur le lien « Imprimer », le navigateur affiche une impression qui comprend uniquement le texte « Bonsoir ». Le lien "Imprimer" lui-même sera masqué.

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!