CSS transparence du fond. Arrière-plan transparent ou texte avec CSS

Avec l'avènement de designers web CSS3 travailler à bien des égards est devenu plus facile et plus logique: après tout, vous pouvez vraiment personnaliser avec souplesse tout objet, le recours moins souvent JavaScript. Disons que vous devez régler la transparence de l'arrière-plan – CSS offre immédiatement plusieurs options.

Arrière – plan défini par un ensemble d'attributs (arrière – plan d'image, de position de fond , de la taille d'arrière – plan, background-repeat, background-attachment,-origine de fond, fond, agrafe, couleur de fond), chacun d' entre eux pouvant être attribuées séparément ou combinés sous l'attribut arrière-plan. Examinons chacun d'eux en détail.

Attribut couleur de fond

En CSS, la couleur de fond peut être définie de plusieurs façons: en utilisant un code hexadécimal, le nom de la couleur ou RGB entrée. En CSS3, il est devenu possible d'utiliser au lieu de l'option RGB-enregistrement avec RGBA.

Hex code couleur est enregistré dans la propriété après le réseau: background-color: # FFDAB9. Si les personnages de cette entrée sont les mêmes paires, le code est généralement une petite coupure: # ccff00 peut être écrit # CF0:

body {background-color: # CF0 ;}.

Le nom est, même dans les couleurs les plus exotiques. Par exemple, en plus de la norme rouge et blanc, vous pouvez utiliser NavajoWhite (#FFDEAD) ou Honeydew2 (# E0EEE0):

body {background-color: purple; }.

Cette dernière option est RVB ou entrée RGBA vous permet de spécifier non seulement la couleur mais aussi la transparence de l'arrière-plan CSS, mais la méthode ne fonctionne que dans les versions IE de plus de 9. D'autres navigateurs reconnaissent la version normale avec la transparence. Selon les normes du W3C, il est préférable d'utiliser RGBA encore au lieu de plus RGB habituelle.

La dernière valeur en arrière-plan RVBA et définit l'opacité de 0 (transparent) à 1 (opaque).

Il y a des valeurs inhabituelles. La couleur de fond peut être réglé en utilisant le HSL et HSLA. Tous deux ont été ajoutés à CSS3, et ne sont donc pas pris en charge par la version IE 9 ou supérieur. Des modes de réalisation RVB identiques ou RVBA, seulement sous une forme différente: Hue (teinte – valeur sur la roue des couleurs, est donnée en degrés), Saturate (saturation – intensité de la couleur en tant que pourcentage, de 0 à 100), la légèreté (légèreté – luminosité, mesurée paramètre similaire Saturate ).

Attribut background-image

La version la plus cross-browser de l'arrière-plan transparent – est l'utilisation de l'image. En CSS3, vous pouvez définir des images encore plus, cela se fait par une virgule. exemple:

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

De cette façon de soutenir même IE8. Plusieurs images en arrière-plan du caoutchouc utilisé dans la mise en page. Surtout, ne pas oublier d'utiliser une image et définir la couleur d'arrière-plan en CSS, car les utilisateurs peuvent simplement télécharger une image.

Attribut position d'arrière-plan

Si vous utilisez l'image pour définir l'unité d'arrière-plan, CSS vous permet de positionner l'image partout sur l'écran. Par défaut, l'image est situé dans le coin supérieur gauche. Attribut prend soit des instructions verbales (haut, bas, gauche, droite), un numérique (intérêt, les pixels et les autres unités). Dans ce cas, vous devez spécifier deux valeurs, horizontales et verticales:

{corps-position de fond: centre droit ;} – dans cet exemple, le modèle sera situé sur le côté droit de la page, en haut et en bas de la distance d'image au même.

Attribut background-size

Parfois, il est nécessaire d'étirer l'arrière-plan CSS ou de réduire sa taille. Pour ce faire, utilisez l'attribut background-size, et la taille de l'arrière-plan peut être défini en pixels ou en pourcentage, et d'autres unités.

Avec cet attribut, il y a quelques problèmes: pour l'affichage correct d'un arrière-plan dans les versions antérieures des préfixes de navigateur à utiliser. Bien sûr, la version actuelle soutient pleinement cet attribut et la nécessité de propriétés spécifiques ont disparu.

Attribut-attachement d'arrière-plan

Cet attribut spécifie le comportement des images d'arrière-plan pendant le défilement. Ainsi, il peut prendre 3 valeurs (hors Hériter, le total de tous les attributs abordés dans cet article):

• fixe – fait l'image sur l'arrière – plan fixe;
• scroll – défile en arrière – plan avec le reste des éléments;
• local – l'image sur fond défile si le défilement a un contenu. Arrière-plan qui va au-delà du contenu du cadre est fixé.

Exemple d'utilisation:

body {fixé background-attachment}.

À l'heure actuelle, Firefox ne supporte pas la dernière propriété (local).

Attribut background-origin

Cet attribut est responsable de l'élément de positionnement. Les premiers navigateurs nécessitent l'utilisation des préfixes. La propriété elle-même a trois paramètres:

• -Box de remplissage est positionnée par rapport au motif de bord, en tenant compte de l'épaisseur de la trame;
• propriétés de la boîte de frontière différente de la précédente en ce que la ligne de démarcation peut être chevauchent complètement ou partiellement le motif;
• l' image de positionnement boîte de contenu pryavyazyvaya son contenu.

Si vous spécifiez plusieurs valeurs, les navigateurs peuvent réagir à leur manière: Firefox et Opera ne perçoivent que la première option.

Attribut background-repeat

En règle générale, si l'image d'arrière-plan est spécifié, il doit être répétée horizontalement ou verticalement. Pour cela et utilisé l'attribut background-repeat. Ainsi, fond de bloc, CSS qui contient une telle propriété peut avoir l'un de plusieurs paramètres:

• no-repeat – l'image apparaît sur une page dans une version unique;
• répéter – arrière – plan est répété dans les directions x et y;
• répéter-x – seulement horizontalement;
• répéter-y – seulement verticalement;
• espace – arrière – plan est répété, mais si l' espace est impossible de remplir entre les images apparaissent vides;
• ronde – l'image est mise à l' échelle, si elle ne remplit pas toute la zone d'images entières.

Exemple des attributs:

body {background-repeat: no- répétition répétition} – background-repeat similaire: repeat-y.

En CSS3 peut spécifier des valeurs pour plusieurs images lors de l'inscription des paramètres, séparés par des virgules.

Attribut fond clip

Cet attribut définit le comportement de l'arrière-plan dans les limites (par exemple, dans le cas des cadres en pointillés):

• padding-box – arrière – plan affichée à l'intérieur du bloc;
• Border-box – l'image est dans le cadre;
• Boîte de contenu – l'image sur l'arrière – plan apparaît que dans le contenu.

Exemple d'utilisation:

body {background-clip: Content- boîte;}.

Chrom et Safari ont besoin préfixe -webkit-.

les attributs de l'opacité et filtre

attribut d'opacité vous permet de définir la transparence de l'arrière-plan – propriété CSS fonctionnera dans tous les navigateurs. La valeur est définie dans la plage de 0,0 à 1,0 inclusivement. Dans ce cas, vous pouvez définir la transparence de l'arrière-plan CSS pas de valeur entière au lieu de 0,3 est suffisant pour écrire 0,3:

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

Pour définir l'opacité d'arrière-plan, CSS convient même pour IE ci-dessous la neuvième version, utilisez l'attribut filtre:

.block {background-image: url ( img.png); filtre: alpha (opacité = 30)}.

Dans ce cas, la valeur d'opacité est comprise entre 0 et 100. Notez que l'opacité d'attributs différents paramètres de transparence par héritage RGBA: lors de l'utilisation d'opacité devient clair non seulement l'arrière-plan, mais aussi tous les éléments à l'intérieur de l'appareil.

Surveillez toujours vos statistiques d'utilisation pour les navigateurs de la CEI et tous les autres pays. Le plus gros problème de tous les DTP – anciennes versions d'IE, ils ne vous permettent pas d'utiliser la mesure CSS3 complète. Dans la mise en page ne pas oublier d'utiliser les services spéciaux qui vérifient si votre navigateur prend en charge une propriété CSS. Si vous ne pouvez pas installer les anciennes versions de navigateurs, trouver un service qui vérifie le travail du site dans plusieurs navigateurs en ligne.