-
¿Cómo se ponen encima de Texto imágenes en una página Web
-
Utilización de hojas de estilo en cascada (CSS), puede colocar imágenes y texto siempre que lo desee en las páginas web. Una de las propiedades CSS - el índice z - hace posible incluso cambiar el orden de los elementos en una página web, por lo que el texto puede ir por encima de una imagen. las imágenes y el texto de posicionamiento con CSS requiere algo de práctica, pero los programadores más experimentados pueden crear diseños complicados y bellos mediante el aprovechamiento de todas las ofertas de CSS.Instrucciones
Editar el código HTML
1 Abrir una página Web en un editor de código como Notepad ++, jEdit o BBEdit. Busque la etiqueta <img> asociado a la imagen que desea colocar texto sobre. La etiqueta <img> se verá así:
<Img />
2 Añadir una nueva línea encima de la etiqueta <img> y luego añadir una abertura <div> etiqueta. Añadir una nueva línea debajo de la etiqueta <img> y escriba el cierre </ div> etiqueta. En la apertura etiqueta <div>, establezca el atributo "ID" para un nombre único y significativo. El código resultante será algo como esto:
<Div id = "contenedor">
<Img />
</ Div>
3 Añadir una línea en blanco debajo de la etiqueta <img> y el tipo de apertura y cierre de etiquetas <div> de nuevo. Escribir el texto entre las etiquetas. Dar el <div> en el principio del texto un atributo "ID" con un nombre único y significativo. Este es un ejemplo del código resultante:
<Div id = "contenedor">
<Img />
<Div id = "imagen-texto"> Este es el texto que ir sobre la imagen. </ Div>
</ Div>
Añadir un poco de código CSS
4 Abra el archivo .CSS si la página web utiliza uno. Si su página web no utiliza un archivo CSS o si no está seguro, a continuación, desplazarse hasta las etiquetas <head> y agregue <style> y </ style>. Colocar cualquier código CSS, ya sea en el archivo .CSS o entre las etiquetas <style>.
5 Escriba el siguiente código CSS:
envoltorio {position: relative; } Envoltorio img {position: absolute; } Imagen-texto {position: absolute; }
El código anterior establece los tipos de posicionamiento sobre el envoltorio <div> etiquetas, así como la imagen y el texto entre ellos. Al establecer la envoltura <div> para utilizar el posicionamiento relativo, podemos utilizar la posición absoluta en sus etiquetas anidadas sin la imagen o el texto que va a la esquina superior de la página Web. en lugar usted puede colocarlos en el interior del envoltorio <div>.6 Añadir la propiedad z-index a su imagen y texto. Esta propiedad determina el orden de apilamiento de los elementos HTML. Elementos dados los números más altos aparecen por primera vez en la página, y elementos dados los números de índice z inferiores pasan por debajo de ellos.
envoltorio img {position: absolute; z-index: 0; } Imagen-texto {position: absolute; z-index: 1; }
El código anterior pone el texto sobre la imagen. Evitar el uso de los números negativos para z-index o el uso de números muy grandes.7 Controlar la ubicación exacta de los elementos con posición absoluta - en este caso, la imagen y el texto - el uso de la "superior" e "izquierda" propiedades CSS. Los números exactos utilizados dependerán del tamaño de la imagen y la forma en que desea que aparezca el texto. Aquí está un ejemplo de texto colocado sobre la esquina superior izquierda de la imagen:
envoltorio img {position: absolute; top: 0px; left: 0px; z-index: 0; } Imagen-texto {position: absolute; top: 0px; left: 0px; z-index: 1; }
Consejos y advertencias
- Aprender el modelo de caja CSS dentro y por fuera. Esto le ayudará a obtener una mejor comprensión de posicionamiento CSS.
- Probar la página Web en Internet Explorer 8 y bajo si usted está preocupado acerca de cómo sus páginas web se verá a los usuarios de más edad navegadores IE. Internet Explorer 6 a 8 contiene muchos errores relacionados con CSS.
