MúLtiples ImáGenes De Fondo Con Css
Descargar como PPT, PDF0 recomendaciones874 vistas
El documento describe cómo usar múltiples imágenes de fondo con CSS. CSS permite separar el contenido de la forma de las páginas web. CSS 3 ofrece más control sobre los elementos de la página, incluida la capacidad de aplicar varias imágenes de fondo a un solo elemento mediante la propiedad background. Se proporcionan ejemplos de código HTML y CSS para aplicar múltiples fondos mediante capas DIV anidadas y la propiedad background de CSS 3.
MúLtiples ImáGenes De Fondo Con Css
- 1. TEMA: MULTIPLES IMAGENES DE FONDO CON CSS NOMBRE: JUAN CHRISTIAN QUIZHPE DOCENTE: ING. RAMIRO RAMIREZ
- 2. Múltiples imágenes de fondo con CSS Con el atributo background-image podemos conseguir que un elemento de la página tenga un fondo de imagen.
- 3. Introducción a CSS 3 CSS es un lenguaje para definir el estilo o la apariencia de las páginas web, escritas con HTML o de los documentos XML. CSS se creó para separar el contenido de la forma, a la vez que permite a los diseñadores mantener un control mucho más preciso sobre la apariencia de las páginas. CSS 3 todavía avanza un poco más en la dirección, de aportar más control sobre los elementos de la página. La novedad más importante que aporta CSS 3 consiste en la incorporación de nuevos mecanismos para mantener un mayor control sobre el estilo con el que se muestran los elementos de las páginas, sin tener que recurrir a trucos o hacks, que a menudo complicaban el código de las web.
- 4. El código HTML que utilizaríamos para anidar varias capas DIV sería como sigue: <div id="fondo1"> <div id="fondo2"> <div id="fondo3"> contenido del elemento que va a tener 3 fondos de imagen distintos ... </div> </div> </div> Ahora veamos el código CSS para darle fondos a cada uno de estos elementos DIV: <style type="text/css"> #fondo1{ background-image: url(fondo1.gif); width: 300px; } #fondo2{ background-image: url(fondo2.png); background-repeat: no-repeat; background-position: bottom right; } #fondo3{ background-image: url(fondo3.png); background-repeat: no-repeat; background-position: center; } </style>
- 5. El HTML del ejemplo de varias imágenes de fondo sería el siguiente: <div id="fondos"> texto de un único elemento ... </div> Ahora veamos el CSS 3 válido para este ejemplo: <style type="text/css"> #fondos{ background: url(fondo3.png) bottom right no-repeat, url(fondo2.png) center no-repeat, url(fondo1.gif) center repeat; width: 300px; } </style>