C'est le premier volet d'une série en trois parties . Aujourd'hui, nous allons couvrir l' attribut Background . Le deuxième article portera sur l'attribut border , et enfin le troisième article portera sur l'attribut de police , alors n'oubliez pas de vous abonner à rattraper les deux autres articles.
Un peu de "Background" (* Pun * Destiné)
L'attribut Background est probablement la caractéristique la plus fréquemment utilisée en CSS. Dans cet article nous allons couvrir les différentes propriétés qui vont avec l'attribut background, et comment les utiliser correctement. Nous aurons également une vitrine à la fin de l'article de sites qui ont utilisé l'attribut à son plein potentiel.
Vue d'ensemble
Il ya 5 propriétés disponibles dans CSS2 relatives à l'attribut background.
- background-color: Set est une couleur d'arrière-plan solide pour l'élément de donnée
- background-image: Spécifie une image à définir comme arrière-plan d'un élément
- background-position: Set est la position de l'image qui a été mis en
- background-repeat: Détermine si l'image est en mosaïque ou non
- background-attachment: Indique si une image défile avec la page ou se trouve dans une position fixe
L'utilisation des propriétés de base
Couleur de fond
La propriété background-color définit la couleur solide pour un élément entier.Voici quelques-unes des valeurs différentes que vous pouvez utiliser pour définir la couleur désirée.
1
2
3
4
| background-color : # 2bb7da ;background-color : red ;background-color : rgb ( 145 , 100 , 140 );background-color : transparent ; |
Image de fond
La propriété background-image précise d'une image sur le serveur ou localement à placer en arrière-plan de l'élément spécifique.
1
2
3
| background-image : url (chemin vers l'image);background-image : url (logo.png); |
Il ya un énorme avantage d'utiliser la propriété background de faire appel à vos images, car elle rend plus difficile pour le «Joe moyen» de prendre les photos à partir de votre site. Par exemple, si vous placez une image dans une balise IMG dans votre html je peux le bouton droit et enregistrez-le , si vous le mettez dans votre CSS en utilisant un div et la propriété image d'arrière-plan alors il serait beaucoup plus difficile pour moi d'apprendre à cette image.Donc, en d'autres termes il ajoute une sécurité supplémentaire à vos images.
Position de fond
La propriété background-position indique où se trouve votre image de fond doit être placé dans votre arrière-plan des éléments.
1
2
3
4
| background-position : 50px 10px- ; / * image se déplace vers la droite et de haut 50px 10px * /background-position : 0% à 50% ;background-position : centre centre ;background-position : 0% à 70% ; |
Répétez fond
La propriété background-repeat spécifie si oui ou non vos mosaïques d'images d'arrière-plan et si oui comment tuile. Cette propriété ne doit être utilisée en conjonction avec la propriété background-image ou il n'aura aucun effet.
1
2
3
4
| background-repeat : repeat ; / * Valeur par défaut pour les images bg * /background-repeat : repeat-y ; / * image Mosaïque verticale * /background-repeat : repeat-x ; / * image Mosaïque horizontale * /background-repeat : no-repeat ; / * Arrête de carrelage * / |
Fixation de fond
La propriété background-attachment n'est pas celui que vous voyez souvent dans le code CSS. Il définit si les parchemins une image de fond avec la page ou séjours dans une position fixe lors du défilement.
1
2
3
4
| background-image : url (logo.png);background-repeat : no-repeat ;background-attachment : fixe ; |
Sténographie attribut Background
Il raccourci!
Au lieu de déclarer chacune de ces propriétés séparément, nous permet d'économiser beaucoup de temps en utilisant le raccourci pour l'attribut background.
1
2
3
| fond : image couleur attachement position de répétition ;arrière-plan : # fff url (logo.png) 50px 10px- défilement no-repeat ; |
Utilisation de l'attribut belles arrière-plan
Voici quelques sites qui ont vraiment cloué l'utilisation d'images d'arrière-plan dans la conception web là-bas.
Web Designer mur
Nick La créatrice de Web Designer mur fait un travail incroyable sur son blog avec des images d'arrière-plan. Il utilise des images de fond multiples pour créer un effet étonnant.
Web Designer Depot
Web Designer Depot fait aussi un travail incroyable de l'utilisation d'images d'arrière-plan élaborés pour améliorer l'expérience utilisateur.
PSD Vibe
PSD Vibe utilise des images d'arrière-plan subtil qui fusionnent avec la couleur de fond solide du site.
C'est tout
En tant que concepteurs et les développeurs Web, nous devons apprendre à utiliser l'attribut background et toutes ses propriétés au maximum. Si vous avez aimé ce post s'il vous plaît bosse, re-tweet, moo, etc ...
Aucun commentaire:
Enregistrer un commentaire