Transparencia do fondo CSS. fondo transparente ou texto con CSS

Coa chegada da web deseñadores CSS3 traballar en moitas maneiras se fixo máis fácil e máis lóxico: ao final, agora pode realmente flexible personalizar calquera obxecto, menos frecuentemente recorrer ao Javascript. Imos dicir que precisa para axustar a transparencia do fondo - CSS ofrece inmediatamente varias opcións.

Fondo definida por un conxunto de atributos (fondo-imaxe, o fondo-de posición de fondo de tamaño, fondo-de repetición, fondo-de fixación, fondo-de orixe, fondo-de clip, cor de fondo), cada un dos cales pode ser atribuídas por separado ou combinados baixo o atributo fondo. Imos examinar cada unha delas en detalle.

Atributo background-color

En CSS, a cor de fondo pode ser definido de varias maneiras: mediante un código hexadecimal, nome da cor ou RGB-entrada. En CSS3 tornouse posíbel usar a opción RGB-de gravación con RGBA en vez de.

código de cor hexadecimal é gravado en propiedade tras a rede: background-color: # FFDAB9. Os personaxes da entrada son os mesmos pares, o código é xeralmente un pequeno corte: # ccff00 pode ser escrita como # cf0:

Body {background-color: # cf0 ;}.

O nome é, mesmo nas cores máis exóticas. Por exemplo, ademais do estándar vermello e branco que pode usar NavajoWhite (#FFDEAD) ou Honeydew2 (# E0EEE0):

Body {background-color: Purple; }.

A última opción é RGB ou entrada RGBA permite que especifique non só a cor, pero tamén a transparencia do fondo do CSS, pero o método funciona só en versións do IE con idade superior a 9. Outros navegadores recoñecen versión normal con transparencia. De acordo cos estándares W3C é preferible usar aínda RGBA canto do RGB máis usual.

O último valor en RGBA fondo e define a opacidade de 0 (transparente) a 1 (opaco).

Hai algúns valores pouco comúns. A cor de fondo pode ser definido mediante o HSL e HSLA. Ambos foron engadidos a CSS3, e, polo tanto, non son soportados polo IE versión 9 ou superior. Concrecións RGB idénticos ou RGBA, só nun formato diferente: Matiz (cor - valor na roda de cores, é dada en graos), saturado (saturación - a intensidade da cor como unha porcentaxe, de 0 a 100), a claridade (lixeireza - brillo, medida de forma semellante parámetro Saturar ).

background-image Atributo

A versión máis cross-browser do fondo transparente - este é o uso da imaxe. En CSS3, pode definir aínda máis imaxes, iso está feito a través dunha vírgula. exemplo:

{Background image-corpo: URL (bg1.png), url (bg2.png)}.

Esta forma de apoiar aínda IE8. Diversas imaxes no fondo do caucho usados no deseño. Importante, non se esqueza de empregar calquera imaxe e establecer a cor de fondo en CSS, como os usuarios poden simplemente subir unha imaxe.

Atributo background-position

Se usar a imaxe para definir a unidade de fondo, CSS permite situar a imaxe en calquera lugar da pantalla. Por defecto, a imaxe está situada na esquina superior esquerda. Atributo leva tanto instrucións verbais (superior, inferior, esquerda, dereita), un número (interese, píxeles e outras unidades). Neste caso, é necesario especificar dous valores, horizontais e verticais:

Body {background-position: centro-dereita ;} - neste exemplo, o patrón será situado no lado dereito da páxina, a parte superior e inferior da distancia para o mesmo.

Atributo background-size

Ás veces é necesario para estirar o fondo CSS ou reducir o seu tamaño. Para iso, use o atributo background-size, eo tamaño do fondo pode ser definida en píxeles ou porcentaxes, e calquera outras unidades.

Con este atributo, hai algúns problemas: mostrar Mapas de fondo nas versións anteriores dos prefixos do navegador a empregar. Por suposto, a versión actual apoia plenamente este atributo ea necesidade de propiedades específicas desapareceu.

Atributo background-attachment

Este atributo especifica o comportamento das imaxes de fondo durante a desprazamento. Así, pode levar 3 valores (non incluíndo a herdar, o total de todos os atributos discutidos neste artigo):

• fixa - fai a imaxe no fondo do fixo;
• rolar - pergamiños de fondo co resto dos elementos;
• local - a imaxe no fondo é rolada se desprazamento ten contido. Fondo que supera o contido do cadro é fixo.

Exemplo de uso:

{Corpo fondo-de fixao fixo}.

Actualmente, o Firefox non soporta a última propiedade (local).

Atributo background-orixe

Este atributo é responsable para o elemento de posicionamento. navegadores inicio require o uso de prefixos. A propiedade en si ten tres parámetros:

• recheo da caixa entra en relación ao nivel de aresta, tendo en conta o espesor da estrutura;
• Propiedades fronteira caixa diferente da anterior na medida en que a liña de límite pode ser completamente ou parcialmente sobrepasar-se ao patrón,
• Imaxe posicionamento de contidos de caixa pryavyazyvaya seu contido.

Se se especifica varios valores, a continuación, os navegadores poden reaccionar á súa propia maneira: Firefox e Opera entendemos só a primeira opción.

Atributo background-repeat

Como regra xeral, a imaxe de fondo se especifica, debe repetirse horizontal ou verticalmente. Por esta e usar o atributo background-repeat. Así, fondo do bloque, CSS, que contén unha tal propiedade pode ter un dos varios parámetros:

• no-repeat - a imaxe aparece nunha páxina nunha única versión;
• repetir - fondo repítese no x e y,
• repeat-x - só horizontalmente;
• repetirse y - só na vertical;
• espazo - fondo é repetido, pero o espazo é imposible cubrir entre as imaxes aparecen en branco;
• rolda - a imaxe é Deseñada, se non cubrir toda a área de todo fotos.

Exemplo dos atributos:

Body {background-repeat: no- repetir repetir} - semellante background-repeat: repeat-y.

En CSS3 pode especificar valores para varias imaxes ao incluír parámetros, separados por comas.

Atributo background-clip

Este atributo especifica o comportamento do fondo baixo os límites (por exemplo, no caso das frotas pontilhadas):

• padding-box - fondo exhibida no interior do bloque;
• border-box - a imaxe vén no marco do cadro;
• contido de caixa - a imaxe no fondo só aparecerá dentro do contido.

Exemplo de uso:

Body {background-clip: conteúdo- caixa;}.

Chrom e Safari requiren prefixo -webkit-.

atributos de opacidade e filtro

atributo opacidade permite definir a transparencia do fondo - propiedade CSS funcionará en todos os navegadores. O valor é definido na franxa de 0.0 a 1.0 inclusive. Neste caso, pode configurar a transparencia do fondo do CSS ningún valor enteiro, en vez de 0,3 é o suficiente para escribir .3:

.block {background-image: url ( img.png); Opacidade: 0,3;}.

Para axustar a opacidade fondo, CSS é adecuado mesmo para IE continuación da novena versión, use o atributo de filtro:

.block {background-image: url ( img.png); Filtro: alfa (opacidade = 30)}.

Neste caso, o valor de opacidade defínese entre 0 e 100. Nótese que a opacidade asignar diferentes opcións de transparencia a través de herdanza RGBA: ao usar opacidade faise evidente non só o fondo, pero tamén todos os elementos no interior da unidade.

Sempre supervisar as estatísticas de uso de navegadores da CEI e os outros países. O maior problema de todos DTP - versións máis antigas do IE, non permiten que use a extensión CSS3 completa. No esquema non esqueza usar os servizos especiais que verifican o teu navegador soporta calquera propiedade CSS. Se non pode instalar versións anteriores de navegadores, atopar un servizo que pode comprobar o traballo do lugar en varios navegadores liña.