Cómo traer una imagen adelante con CSS

Escrito por brandy alexander | Traducido por daniel gómez villegas
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo traer una imagen adelante con CSS
Introduce CSS para llevar una imagen hacia adelante. (Medioimages/Photodisc/Photodisc/Getty Images)

Al diseñar páginas web, las imágenes de tu sitio pueden quedar solapadas por el texto y el contenido de la página. Afortunadamente, tienes la capacidad de traer una imagen hacia adelante utilizando hojas de estilo en cascada (CSS). Con CSS, utiliza el atributo z-index, similar a la capacidad "Traer al frente" de un programa de procesamiento de texto, para posicionar tus gráficos. Utiliza un editor de texto de tu computadora para aplicar el CSS que modifica la posición de tus imágenes.

Nivel de dificultad:
Moderadamente difícil

Otras personas están leyendo

Instrucciones

  1. 1

    Abre el editor de texto y luego el archivo del sitio web que contiene la imagen que deseas modificar.

  2. 2

    Escribe el siguiente código CSS después de abrir la etiqueta <head>:

    <style type="text/css">

    </style>

  3. 3

    Coloca el cursor entre los elementos de estilo y escribe un signo de número seguido de un término de tu elección (por ejemplo, "#forward"). Escribe un par de llaves después de ello, como se ve aquí para crear la regla de estilo para tu imagen:

    forward { }

    El signo de número crea un ID de CSS, que te permite diseñar una regla distinta para una imagen particular en tu página.

  4. 4

    Escribe "position: absolute;" entre los corchetes para indicar al navegador que muestre tu imagen exactamente donde especifiques. Además, escribe "z-index:" e introduce un valor positivo en píxeles (px) de este modo:

    forward {position: absolute; z-index: 5px;}

    Z-index determina qué orden de aparece en la imagen, por lo tanto, un valor positivo más alto indica que la imagen está más hacia adelante.

  5. 5

    Busca el código de imagen que deseas asignar a la regla de estilo CSS y escribe "id=#forward" dentro de la etiqueta. Por ejemplo: <img src="http://www.site.com/image.gif" id="#forward" />

    Asegúrate de reemplazar "#forward" con el nombre de tu propia regla de CSS.

  6. 6

    Guarda el archivo y observa una vista previa de tu trabajo en un navegador web para ver la nueva posición de la imagen.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles