Avec l'avènement de travail CSS3 DTP à bien des égards est devenu plus facile et plus logique: après tout, vous pouvez maintenant le faire pour configurer un objet flexible, plus rarement recours à JavaScript.Disons que vous avez besoin de régler la transparence de l'arrière-plan - CSS propose immédiatement plusieurs options.
fond définie par un ensemble d'attributs (background-image, background-position, background-size, background-repeat, background-attachment, background-origin, background-clip, background-color), dont chacun peut être prescrit seul oude réunir sous le même attribut background.Examinons chacune de ces plus en détail.
attribut background-color
En CSS, la couleur de fond peut être réglé de plusieurs manières: en utilisant le code hexadécimal, le nom de la couleur ou RGB-entrée.En CSS3, il est devenu possible d'utiliser à la place de l'option RGB-enregistrement avec RGBA.
code hexadécimal de la couleur est écrit dans la propriété après le treillis: background-color: # FFDAB9.Si les personnages de paires correspondent à un tel enregistrement, le code est habituellement une petite coupure: # ccff00 peut être écrite comme # CF0: corps
{background-color: # CF0;}.
nom là-bas, 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): corps
{background-color: purple;}.
dernière option RGB ou RGBA fiche vous permet de spécifier non seulement la couleur mais aussi la transparence de la CSS de fond, mais la façon de travailler dans IE 9 versions ne âgées.Les autres navigateurs reconnaissent variante de la normale avec la transparence.Selon les normes du W3C, il est préférable d'utiliser tout de même RGBA au lieu de la RGB plus habituel.
dernière valeur à la RGBA définit l'opacité de l'arrière-plan et de 0 (transparent) à 1 (opaque).
Il ya quelques valeurs inhabituelles.La couleur de fond peut être spécifié en utilisant HSL et HSLA.Les deux ont été ajoutés en CSS3, et donc pas pris en charge par IE version 9 ou supérieur.Les options sont identiques à RGB ou RGBA, juste dans un format différent: Hue (teinte - la valeur sur la roue de couleur, est donné en degrés), Saturation (saturation - intensité de la couleur en pourcentage, de 0 à 100), légèreté (légèreté - luminosité, mesurée dans les mêmes paramètre Saturer).
attribut background-image
version la plus multi-navigateur d'un fond transparent - est l'utilisation de l'image.En CSS3, vous pouvez spécifier des images encore plus, cela se fait par une virgule.Exemple: corps
{background-image: url (bg1.png), URL (bg2.png)}.
soutient cette même IE8.Plusieurs images en arrière-plan utilisé dans la mise en page du caoutchouc.Surtout, ne pas oublier d'utiliser une image comme indiqué dans votre couleur de fond CSS, car les utilisateurs peuvent tout simplement télécharger une photo.
attribut background-position
Si vous utilisez une image pour définir le bloc de fond, CSS vous permet de positionner l'image n'importe où sur l'écran.Par défaut, l'image se trouve dans le coin supérieur gauche.Attribut accepter des instructions verbales (haut, bas, gauche, droite), ou numérique (intérêts, pixels et les autres unités).Il est nécessaire de spécifier les deux valeurs pour horizontal et vertical: corps
{background-position: centre-droit;} - dans cet exemple, le fond sera situé sur le côté droit de la page, avec le haut et le bas de la distance à l'image sont les mêmes.
attribut background-size
Parfois, vous avez besoin d'utiliser les CSS pour étirer l'arrière-plan ou de réduire sa taille.A cet effet, l'attribut de taille arrière-plan, et la taille peuvent être définis comme des pixels d'arrière-plan ou de pourcentage, ou dans toute autre unité de mesure.
Avec cet attribut, il ya quelques problèmes: l'affichage correct d'un fond dans les navigateurs plus anciens, vous devez utiliser un préfixe.Bien sûr, les versions actuelles soutiennent pleinement cet attribut et de la nécessité pour les propriétés spécifiques ont disparu.
attribut background-attachment
Cet attribut spécifie le comportement de l'image d'arrière-plan lors du défilement.Par exemple, il peut prendre 3 valeurs (à l'exclusion hérite, pour le total de tous les attributs de cet article):
- fixe - rend l'image sur le fond de fixe;
- défilement - les rouleaux de fond avec le reste des éléments;
- locale - l'image sur fond défile si le défilement est contenu.Contexte, qui va au-delà du contenu est fixé.
Exemple d'utilisation: corps
{background-attachment fixé}.
Actuellement, Firefox ne supporte pas la dernière propriété (locale).
attribut background-origin
Cet attribut est responsable du positionnement de l'élément.Les versions antérieures des navigateurs nécessitent l'utilisation des préfixes.La propriété elle-même a trois paramètres:
- padding-box positions de du bord de l'arrière-plan, tout en tenant compte de l'épaisseur de la trame;
- border-box propriétés différentes de la précédente en ce que la ligne de démarcation peut être complètement ou partiellement le fond couvrir;
- image de positionnement contenu boîte de pryavyazyvaya son contenu.
Si vous spécifiez plusieurs valeurs, le navigateur peut réagir à leur manière: Firefox et Opera acceptent uniquement la première option.
attribut background-repeat
En règle générale, si l'image de fond est spécifié, il doit être répété horizontalement ou verticalement.Pour cela et utilisé l'attribut background-repeat.Ainsi, le bloc fond, CSS qui contient une telle propriété peut avoir une de plusieurs options:
- no-repeat - image apparaît sur la page dans un formulaire unique;
- répétition - motif répété dans le X et Y;
- repeat-x - seulement horizontalement;
- repeat-y - seulement verticalement;
- espace - motif se répète, mais si l'espace est rempli pas, alors il ya des vides entre les images;
- ronde - l'image est réduite, si elle ne remplit pas toute la zone toute l'image.
Exemple d'attribut: corps
{background-repeat: repeat-répétez pas} - similaire background-repeat: repeat-y.
En CSS3 peut spécifier les valeurs de plusieurs images si les paramètres de transfert séparées par des virgules.
attribut background clip
Cet attribut spécifie 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 - entre dans le champ de l'image;
- content-box - l'image sur l'arrière-plan apparaît que dans le contenu.
Exemple d'utilisation: corps
{background-clip: content-box;}.
Chrom Safari et nécessitent l'utilisation de la -webkit- de préfixe.
attribut d'opacité et de filtrer
attribut d'opacité vous permet de régler la transparence de fond - propriété CSS travaillera dans tous les navigateurs.La valeur est réglable de 0.0 à 1.0 inclus.Avec cela, vous pouvez régler la transparence de l'arrière-plan CSS sans valeur entière au lieu de 0,3 suffit d'écrire .3:
.block {background-image: url (img.png);opacité: 0,3;}.
Pour régler la transparence du fond, CSS convient même pour IE ci-dessous la neuvième version, utilisez le filtre d'attribut:
.block {background-image: url (img.png);filtre: alpha (opacity = 30);}.
Dans ce cas, l'opacité est réglé entre 0 et 100. Notez que l'opacité attribut différents paramètres de transparence via RGBA l'hérédité: l'opacité en utilisant un fond transparent est non seulement, mais aussi tous les éléments à l'intérieur de l'unité.
Assurez-vous toujours les statistiques d'utilisation du navigateur de la CEI et tous les autres pays.Le plus gros problème de tous DTP - les anciennes versions de IE, ils ne permettent pas la pleine utilisation du CSS3.Si la mise en page ne pas oublier d'utiliser les services spéciaux que vérifier si votre navigateur est un CSS de la propriété.Si vous ne pouvez pas installer les anciennes versions de navigateurs, vous obtenez le service qui vérifie le fonctionnement du site dans différents navigateurs en ligne.
