CSS transparencia de fondo. fondo transparente o texto con CSS

Con la llegada de los diseñadores web CSS3 trabajar en muchos aspectos se ha convertido en más fácil y más lógico: después de todo, ahora puede realmente flexible personalizar cualquier objeto, con menos frecuencia recurrir a JavaScript. Digamos que es necesario ajustar la transparencia del fondo – CSS ofrece varias opciones de inmediato.

Antecedentes definido por un conjunto de atributos (Imagen de fondo, el fondo de posición , el fondo de tamaño, de fondo de la repetición, fondo en el apego, fondo de origen, de fondo del clip, background-color), cada uno de los cuales se pueden asignar por separado o combinados bajo el atributo fondo. Examinemos cada uno de ellos en detalle.

Atributo background-color

En CSS, el color de fondo se puede configurar de varias maneras: utilizando un código hexadecimal, nombre del color o RGB-entrada. En CSS3 se hizo posible utilizar la opción RGB-grabación con RGBA en lugar de.

código de color hexadecimal se registra en la propiedad después de la celosía: background-color: # FFDAB9. Si los personajes de esta entrada son los mismos pares, el código es por lo general un poco de corte: # ccff00 se puede escribir como # cf0:

body {background-color: # cf0 ;}.

El nombre es, incluso en los colores más exóticos. Por ejemplo, además del estándar de color rojo y blanco se puede utilizar NavajoWhite (#FFDEAD) o Honeydew2 (# E0EEE0):

body {background-color: púrpura; }.

La última opción es la entrada RGB o RGBA le permite especificar no sólo el color sino también la transparencia del fondo del CSS, pero el método sólo funciona en versiones de IE mayores de 9. Otros navegadores reconocen versión normal con transparencia. De acuerdo con los estándares del W3C es preferible utilizar todavía RGBA en lugar del RGB más habitual.

El último valor de fondo RGBA y establece la opacidad de 0 (transparente) a 1 (opaco).

Hay algunos valores inusuales. El color de fondo se puede ajustar con la HSL y HSLA. Ambos se añadieron a CSS3, y por lo tanto no son admitidos por IE versión 9 o superior. Las formas de realización RGB idénticos o RGBA, sólo en un formato diferente: Hue (sombra – valor en la rueda de color, se da en grados), saturado (saturación – intensidad del color como un porcentaje, de 0 a 100), ligereza (luminosidad – brillo, miden de manera similar parámetro Saturate ).

Atributo Imagen de fondo

La versión más multi-navegador del fondo transparente – esto es el uso de la imagen. En CSS3, puede ajustar aún más las imágenes, esto se hace mediante una coma. ejemplo:

{Imagen de fondo de cuerpo: url (bg1.png), URL (bg2.png)}.

Esta forma de apoyar incluso IE8. Varias imágenes en el fondo del caucho utilizado en el diseño. Es importante destacar que no se olvide de usar cualquier imagen y establecer el color de fondo en CSS, ya que los usuarios pueden simplemente cargar una imagen.

Atributo background-position

Si se utiliza la imagen para fijar la unidad 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 toma cualquiera de las instrucciones verbales (arriba, abajo, izquierda, derecha), una numérica (intereses, píxeles y otras unidades). En este caso, debe especificar dos valores, horizontales y verticales:

body {background-position: derecho y central ;} – en este ejemplo, el patrón se encuentra en el lado derecho de la página, la parte superior e inferior de la distancia de la imagen a la misma.

Atributo background-size

A veces es necesario estirar el fondo CSS o reducir su tamaño. Para ello, utilizar el atributo fondo de tamaño, y el tamaño de los antecedentes se puede ajustar en píxeles o porcentajes, y cualesquiera otras unidades.

Con este atributo, hay algunos problemas: para una correcta visualización de un fondo en las versiones anteriores de los prefijos navegador para ser utilizado. Por supuesto, la versión actual es totalmente compatible con este atributo y la necesidad de propiedades específicas desapareció.

Atributo background-attachment

Este atributo especifica el comportamiento de las imágenes de fondo mientras se desplaza. Por lo tanto, puede tomar 3 valores (sin incluir la hereda, el total para todos los atributos mencionados en este artículo):

• fija – hace que la imagen en el fondo de fijo;
• desplazarse – rollos de fondo con el resto de los elementos;
• locales – la imagen de fondo es desplazado si el desplazamiento tiene contenido. Antecedentes que va más allá de los contenidos de la trama es fija.

Ejemplo de uso:

body {background-attachment fija}.

Actualmente, Firefox no es compatible con la última propiedad (local).

Atributo background-origen

Este atributo es responsable del elemento de posicionamiento. Los primeros navegadores requieren el uso de prefijos. La propiedad en sí tiene tres parámetros:

• padding-caja se posiciona en relación con el patrón de borde, teniendo en cuenta el espesor de la trama;
• propiedades de borde de cuadro diferentes de la anterior en que la línea de límite puede ser completamente o parcialmente se superponen el patrón;
• posicionamiento de imagen contenido-box pryavyazyvaya su contenido.

Si especifica varios valores, a continuación, los navegadores pueden reaccionar a su manera: Firefox y Opera perciben sólo la primera opción.

Atributo background-repeat

Como regla general, si no se especifica la imagen de fondo, debe repetirse horizontal o verticalmente. Por esta y se utiliza el atributo background-repeat. Por lo tanto, el bloque de fondo, CSS, que contiene una propiedad de este tipo puede tener uno de varios parámetros:

• no-repeat – aparece la imagen de una página en una sola versión;
• repetir – fondo se repite en la x e y;
• repetir-x – sólo en horizontal;
• repetir-y – sólo vertical;
• espacio – de fondo se repite, pero si el espacio es imposible de llenar en medio de las imágenes aparecen vacíos;
• ronda – la imagen se escala, si no llena toda el área de la totalidad de las imágenes.

Ejemplo de los atributos:

body {background-repeat: no- repetición de la repetición} – similares background-repeat: repeat-y.

En CSS3 pueden especificar valores para múltiples imágenes cuando se enumeran los parámetros, separados por comas.

Atributo background-clip

Este atributo define el comportamiento del fondo bajo los límites (por ejemplo, en el caso de las tramas de puntos):

• padding-caja – fondo que se muestra en el interior de la manzana;
• frontera-box – la imagen se enmarca dentro;
• el contenido de la caja – la imagen en el fondo solo aparecerá en el contenido.

Ejemplo de uso:

body {background-clip: contenido- caja;}.

Chrom y Safari requieren prefijo -webkit-.

atributos de opacidad y filtro

atributo de opacidad le permite establecer la transparencia del fondo – propiedad CSS funciona en todos los navegadores. El valor se establece en el rango de 0,0 a 1,0 inclusive. En este caso, se puede establecer la transparencia del fondo del CSS sin valor entero en lugar de 0,3 es suficiente para escribir 0.3:

.block {Imagen de fondo: url ( img.png); opacidad: 0,3;}.

Para establecer la opacidad del fondo, CSS es conveniente incluso para IE por debajo de la novena versión, utilice el atributo de filtro:

.block {Imagen de fondo: url ( img.png); filtro: alfa (opacidad = 30)}.

En este caso, el valor de opacidad se establece entre 0 y 100. Tenga en cuenta que la opacidad de atributos diferentes valores de transparencia a través de la herencia RGBA: cuando se utiliza la opacidad se hace evidente no sólo el fondo, sino también todos los elementos dentro de la unidad.

Siempre supervisar las estadísticas de uso de los navegadores de la CEI y todos los demás países. El mayor problema de todos DTP – versiones antiguas de IE, que no le permite usar el CSS 3 en toda su extensión. En la disposición no se olvide de utilizar los servicios especiales que comprobar si el navegador es compatible con cualquier propiedad CSS. Si no se puede instalar versiones antiguas de navegadores, encontrar un servicio que va a comprobar el sitio de trabajo en varios navegadores en línea.