Con el advenimiento de trabajo DTP CSS3 en muchos aspectos se ha convertido en más fácil y más lógico: después de todo, ahora se puede hacer para configurar de forma flexible un objeto, más raramente recurrir a JavaScript.Digamos que usted necesita para ajustar la transparencia del fondo - CSS ofrece de inmediato varias opciones.
fondo definido por un conjunto de atributos (Imagen de fondo, fondo de posición, de fondo de tamaño, background-repeat, background-attachment, fondo de origen, fondo-clips, background-color), cada uno de los cuales puede ser prescrito solo oa unirse bajo el mismo fondo atributo.Examinemos cada una de ellas con más detalle.
atributo background-color
En CSS, el color de fondo se puede configurar de varias maneras: utilizando el código hexadecimal, nombre del color o RGB-entrada.En CSS3 se hizo posible usar en lugar de la opción RGB-grabación con RGBA.
código de color hexadecimal está escrito en la propiedad después de la celosía: background-color: # FFDAB9.Si los personajes de pares coinciden con dicho registro, el código suele ser un pequeño corte: # ccff00 se puede escribir como # CF0:
body {background-color: # CF0;}.
nombre allí, incluso en los colores más exóticos.Por ejemplo, además de la norma de color rojo y blanco, puede utilizar NavajoWhite (#FFDEAD) o Honeydew2 (# E0EEE0):
body {background-color: púrpura;}.
RGB última opción o registro RGBA permite especificar no sólo el color sino también la transparencia de la CSS de fondo, pero la manera de trabajar en IE 9 sólo versiones más antiguas.Otros navegadores reconocen variante normal con transparencia.De acuerdo con los estándares del W3C es preferible utilizar todos el mismo RGBA en lugar del RGB más habitual.
último valor en el RGBA establece la opacidad del fondo y de 0 (transparente) a 1 (opaco).
Hay algunos valores inusuales.El color de fondo se puede especificar utilizando HSL y HSLA.Ambos se añadieron en CSS3, y por lo tanto no soportado por IE versión 9 o superior.Las opciones son idénticas a RGB o RGBA, justo en un formato diferente: Hue (matiz - el valor en el círculo cromático, se da en grados), Saturar (saturación - intensidad de color en forma de porcentaje, de 0 a 100), Ligereza (luminosidad - brillo, mide de manera similar parámetro Saturar).Atributo
Imagen de fondo
versión más cross-browser de un fondo transparente - es el uso de la imagen.En CSS3, puede especificar aún más las imágenes, esto se hace a través de una coma.Ejemplo:
body {background-image: url (bg1.png), url (bg2.png)}.
apoya esta aun IE8.Varias imágenes como el fondo utilizado en el diseño de la goma.Es importante destacar que no se olvide de utilizar cualquier imagen que figura en su color de fondo CSS, ya que los usuarios pueden simplemente subir una foto.
atributo background-position
Si utiliza una imagen para definir el bloque de fondo, CSS le permite colocar la imagen en cualquier lugar de la pantalla.Por defecto, la imagen se encuentra en la esquina superior izquierda.Atributo aceptar instrucciones verbales (arriba, abajo, izquierda, derecha), o numérica (intereses, píxeles y otras unidades).Es necesario especificar los dos valores para horizontal y vertical:
body {background-position: derecho y central;} - en este ejemplo, el fondo se encuentra en el lado derecho de la página, con la parte superior e inferior de la distancia a la imagen son los mismos.Atributo
fondo de tamaño
A veces es necesario utilizar CSS para estirar el fondo o reducir su tamaño.Para este propósito, el atributo de fondo grande, y el tamaño se pueden definir como fondo píxeles o porcentaje, o en cualquier otra unidad de medida.
Con este atributo, hay algunos problemas: para la correcta visualización de un fondo en los navegadores más antiguos usted debe utilizar un prefijo.Por supuesto, las versiones actuales son totalmente compatibles con este atributo y la necesidad de las propiedades específicas desaparecieron.Atributo
background-attachment
Este atributo especifica el comportamiento de la imagen de fondo cuando se desplaza.Por ejemplo, puede tomar 3 valores (excluyendo heredar, para el total de todos los atributos de este artículo):
- fijo - hace que la imagen en el fondo de fijo;
- desplazamiento - los rollos de fondo con el resto de los elementos;
- locales - la imagen de fondo se desplaza si el desplazamiento es el contenido.Fondo, que va más allá del contenido es fijo.
Ejemplo de uso:
body {background-attachment fija}.
Actualmente, Firefox no soporta las últimas propiedades (local).
atributo background-origen
Este atributo es responsable de la colocación del elemento.Navegadores versiones anteriores requieren el uso de prefijos.La propiedad en sí tiene tres parámetros:
- padding-box posiciones desde el borde del fondo, teniendo en cuenta el grosor de la trama;
- propiedades border-box diferentes de la anterior en que la línea de límite puede ser completa o cubrir parcialmente el fondo;Imagen posicionamiento contenido de la caja
- pryavyazyvaya su contenido.
Si especifica varios valores, el navegador puede reaccionar a su manera: Firefox y Opera sólo aceptan la primera opción.Atributo
background-repeat
Como regla general, si no se especifica la imagen de fondo, debe repetirse horizontal o verticalmente.Por esto y utiliza el atributo background-repeat.Por lo tanto, los antecedentes bloque, CSS que contiene una propiedad de este tipo puede tener una de varias opciones:
- no-repeat - imagen aparece en la página en una sola forma;
- repita - patrón repetido en el xey;
- repetir-x - sólo en horizontal;
- repetir-y - sólo vertical;
- espacio - patrón se repite, pero si el espacio está vacío, entonces hay vacíos entre las imágenes;
- ronda - la imagen se escala, si no llena todo el área de la imagen entera.
Ejemplo de atributo:
body {background-repeat: no-repeat repetición} - similar background-repeat: repeat-y.
En CSS3 puede especificar valores para múltiples imágenes si los parámetros de transferencia separados por comas.
atributo fondo-clip
Este atributo especifica el comportamiento del fondo debajo de los límites (por ejemplo, en el caso de las tramas de puntos):
- padding-cuadro - fondo que aparece en el interior de la manzana;
- frontera caja - quede incluida en el ámbito de la imagen;
- contenido de la caja - la imagen en el fondo sólo aparece dentro del contenido.
Ejemplo de uso:
body {background-clip: Contenido de la caja;}.
Chrom y Safari requieren el uso de la -webkit- prefijo.Atributo opacidad
y filtrar atributo opacidad
permite configurar la transparencia de fondo - propiedad CSS funciona en todos los navegadores.El valor es ajustable de 0.0 a 1.0 inclusive.Con esto usted puede configurar la transparencia del fondo CSS sin un valor entero en lugar de 0,3 es suficiente para escribir 0.3:
.block {background-image: url (img.png);opacidad: 0,3;}.
Para ajustar la transparencia de fondo, CSS es conveniente incluso para IE por debajo de la novena versión, utilice el filtro de atributos:
.block {background-image: url (img.png);Filtro: alfa (opacidad = 30);}.
En este caso, la opacidad se encuentra entre 0 y 100. Tenga en cuenta que la opacidad de atributos diferentes ajustes de transparencia a través de la herencia RGBA: opacidad usando un fondo transparente no sólo, sino también todos los elementos dentro de la unidad.
Asegúrese siempre de que las estadísticas de uso del navegador de la CEI y todos los demás países.El mayor problema de todos DTP - versiones antiguas de IE, que no permiten el uso completo del CSS3.Si el diseño no se olvide de utilizar los servicios especiales que comprobar si el navegador es un CSS propiedad.Si no puede instalar versiones antiguas de navegadores, que recibe el servicio que comprueba el funcionamiento del sitio en diferentes navegadores en línea.
