La consulta de medios se utiliza para ocultar/mostrar un elemento al imprimir las páginas web. Use la consulta de impresión @media y establezca la propiedad de visibilidad en ese elemento que debe ocultarse/mostrar en la impresión. En este artículo, usamos la consulta de medios y la propiedad de visibilidad para imprimir la página web.
Ejemplo 1: En este ejemplo, imprimiremos el elemento del cuerpo en el momento de la impresión. Para ocultar el elemento del cuerpo, establezca la propiedad de visibilidad en oculto dentro de la consulta de medios impresos.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to create printable webpage
using CSS media queries?
</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
@media print {
.noprint {
visibility: visible;
}
}
</style>
</head>
<body class="noprint">
<h1>GeeksforGeeks</h1>
<p>
GeeksforGeeks: It is a computer
science portal for geeks
</p>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, imprimiremos el elemento del cuerpo en el momento de la impresión. Para ocultar el elemento del cuerpo, establezca la propiedad de visibilidad en oculto dentro de la consulta de medios impresos.
HTML
<!DOCTYPE html>
<html>
<head>
<title>
How to create printable webpage
using CSS media queries?
</title>
<style>
body {
text-align: center;
}
@media print {
.noprint {
visibility: visible;
}
}
</style>
</head>
<body class="noprint">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/geeksforgeeks-9.png"
alt="GFG">
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por AshokJaiswal y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA