Cómo ocultar imágenes digitales en páginas web

Las hojas de estilo en cascada pueden ayudarlo a ahorrar tiempo al mantener páginas en su sitio web. Las imágenes digitales, por ejemplo, probablemente aparezcan en algunas de sus páginas web. Si alguna vez necesita evitar que las personas vean esas imágenes, puede usar CSS para ocultar las imágenes cambiando una sola palabra en su documento HTML. Incluso puede hacer que las imágenes vuelvan a aparecer al instante haciendo una actualización rápida al código CSS de su documento.

1.

Abra un documento HTML que contenga al menos una imagen y localice la sección del cuerpo del documento. Las etiquetas de imagen de la sección del cuerpo aparecerán similares a la que se muestra a continuación:

Una etiqueta de imagen básica que comienza con la palabra "img". La etiqueta en este ejemplo hace referencia a una imagen llamada "img / setting-up-new-business / 167 / how-hide-digital-images-web-pages-2.jpg".

2.

Cambie una de sus etiquetas de imagen para que haga referencia a una clase de CSS denominada "visibilidad", como se muestra en el siguiente ejemplo:

Si la etiqueta ya tiene una referencia de clase, deberá cambiar la etiqueta de una manera ligeramente diferente. Supongamos que su etiqueta aparece como se muestra a continuación:

Esa etiqueta de imagen ya hace referencia a una clase llamada "myclass". Si su etiqueta img ya hace referencia a una clase, como esta lo hace, agregue "visibilidad" después del nombre de la clase, como se ve a continuación:

3.

Pegue lo siguiente en la sección principal de su documento:

Esto crea la clase de visibilidad y establece su valor de atributo de visualización en "bloque". Ese valor hace que las imágenes sean visibles.

4.

Guarda el documento y ábrelo en cualquier navegador. Tus imágenes aparecerán como normales.

5.

Vuelva a su editor y localice el código CSS que agregó a la sección de encabezado del documento. Cambie el valor del atributo de visualización de "bloque" a "ninguno" y guarde el documento.

6.

Vuelva a su navegador y presione "Ctrl-F5" para borrar su almacenamiento temporal. Cuando la página se actualice, tus imágenes desaparecerán.

Consejos

  • Agregue una referencia de clase a cada imagen que quiera ocultar. Nombra tu clase de CSS como quieras. Su nombre es "visibilidad" en este ejemplo.
  • Haz que tus imágenes vuelvan a ser visibles cambiando la palabra "ninguno" a "bloquear".

Entradas Populares