Hace poco maquetando una web para un cliente me di cuenta de que había poca información sobre el manejo de los contenedores con transparencias en CSS3.
La idea que tenía era que, sobre una imagen que ocupara todo el ancho y el alto de la ventana del browser, colocar dos cajas semitransparentes con texto opaco. (No vale usar color rgb y opacity, ya que el texto también se vuelve transparente).
Bien, pues paso a explicarles brevemente cómo se consigue esto de modo sencillo y fácil:
Vamos a ver cómo hacer para que la imagen de fondo ocupe por completo el fondo de la pantalla. Lo que hacemos es cargar la ruta de la imagen, centrarla por arriba y por abajo y establecerla con una posición fija, y para finalizar le damos un background cover. Con esto obtenemos una imagen de fondo centrada y que ocupe el ancho y el alto del browser.
Código :
body{ background: url(../img/2.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
Ahora vamos a crear una caja semitransparente con texto opaco. Con color definimos el color del texto que contiene la caja y con el background usamos r.g.b.a, donde r.g.b. es el color y a es la transparencia que va de 0 a 1.
Código :
#caja{ color: #fff; background-color: rgba(211,211,211,0.3); }
El Html:
Código :
<div id="caja"> <p> Lorem Ipsum es simplemente el texto de relleno de las imprentas y archivos de texto. Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen. No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original. Fue popularizado en los 60s con la creación de las hojas "Letraset", las cuales contenian pasajes de Lorem Ipsum, y más recientemente con software de autoedición, como por ejemplo Aldus PageMaker, el cual incluye versiones de Lorem Ipsum. </p> </div>
Y listo! Ya tenemos una imagen de fondo que ocupe todo el browser y una cajas semitransparente con texto opaco .
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Por Robert el 25 de Febrero de 2014
Por juanvc123 el 25 de Febrero de 2014
Por QUHO el 25 de Febrero de 2014
Por Mariux el 25 de Febrero de 2014
Robert-blog :
Te enseña a hacer eso, no hay truco.
Por Mariux el 25 de Febrero de 2014
QUHO-blog :
No es tan largo el tuto. Lo podés probar vos mismo en tu editor o en algún servicio tipo codepen para ver qué hace. saludos
Por CarlosRuminott el 25 de Febrero de 2014
Por el 26 de Febrero de 2014
ecto
Por kakashi2000 el 07 de Marzo de 2014
http://jseditor.proyectosbds.com/welcome/5415/edit
Por Juan_1 el 07 de Marzo de 2014
Es verdad que que un navegador que no soporte r.g.b.a no tendrá ese efecto pero ya es muy raro que pase eso, en la mayoría de los navegadores está soportado.
Podeis probarlo en un servicio tipo codepen o similar y hacer vuestros cambios como cambiar la imagen de fondo por un color... .
Cualquier duda no dudeis en preguntarme .
Por Jesús el 29 de Marzo de 2014
Por Luis el 30 de Mayo de 2014
Por Hillary el 26 de Enero de 2015