The media query is used to hide an element when printing a web pages. Use @media print query and set the visibility hidden to that element which need to hide at printing.
Example 1: In this example, hide the element h1 at printing time. To hide the element h1 use media query and set visibility:hidden.
<!DOCTYPE html> <html> <head> <title>Hide element at print</title> <style> body { text-align:center; } h1 { color:green; } @media print { .noprint { visibility: hidden; } } </style> </head> <body> <h1 class = "noprint">GeeksforGeeks</h1> <p>GeeksforGeeks: It is a computer science portal for geeks</p> </body> </html> |
Output:
Before printing the page:
After printing the page:
Example 2: Tn this example, use media query to hide image element when print the web pages.
<!DOCTYPE html> <html> <head> <title>Hide element at printing</title> <style> body { text-align:center; } h1 { color:green; } @media print { img { visibility: hidden; } } </style> </head> <body> <h1>GeeksforGeeks</h1> <p>A computer science portal for geeks</p> <img src="gfg.png" alt="image"> <style> .noprint { visibility: hidden; } </style> </body> </html> |
Output:
Before printing the page:
After printing the page:
leave a comment
0 Comments