Fond d'écran CSS
Il existe 5 propriétés d'arrière-plan principales en CSS, elles sont :
background-color : Spécifiez la couleur de l'arrière-plan rempli.
background-image : Référencez une image comme arrière-plan.
background-position : Spécifiez la position de l'image d'arrière-plan de l'élément.
background-repeat : Détermine s'il faut répéter l'image d'arrière-plan.
background-attachment : Détermine si l'image d'arrière-plan défile avec la page.
Ces propriétés peuvent toutes être combinées en une seule propriété abrégée : background. Un point important à noter est que l'arrière-plan occupe toute la zone de contenu de l'élément, y compris le remplissage et la bordure, mais n'inclut pas la marge de l'élément. Cela fonctionne bien dans Firefox, Safari, Opera et IE8, mais dans IE6 et IE7, l'arrière-plan ne compte pas la bordure.
Background-color
La propriété background-color remplit l'arrière-plan avec une couleur unie. Il existe de nombreuses façons de spécifier cette couleur et les méthodes suivantes donnent toutes le même résultat.
couleur de fond : bleu ;
couleur de fond : rgb(0, 0, 255);
couleur de fond : #0000ff;
La couleur d'arrière-plan peut également être définie sur transparente, ce qui rend visibles les éléments situés en dessous.
Background-image
L'attribut background-image permet de spécifier une image à afficher en arrière-plan. Peut être utilisé conjointement avec background-color, donc si l'image ne se répète pas, les zones non couvertes par l'image seront remplies avec la couleur d'arrière-plan. Le code est très simple, rappelez-vous simplement que le chemin est relatif à la feuille de style, donc dans le code suivant, l'image et la feuille de style sont dans le même répertoire.
background-image: url (image.jpg);
Mais si l'image se trouve dans un sous-répertoire appelé images, elle devrait être :
background-image: url( images/image.jpg);
<html>
<head>
<style type="text/css">
body {background-image: url(这个地方要写的就是你的图片的url地址了);}
</style>
</head>
<body>
</body>
</html>Background-repeat)
Lors de la définition de l'image d'arrière-plan, l'image sera affichée par défaut Tile horizontalement et verticalement pour couvrir l'ensemble de l'élément. C'est peut-être ce dont vous avez besoin, mais parfois vous souhaitez que l'image n'apparaisse qu'une seule fois ou qu'elle soit en mosaïque dans une seule direction. Voici les valeurs de réglage et les résultats possibles :
background-repeat : répéter ; /* Valeur par défaut, en mosaïque horizontale et verticale*/
background-repeat : no-repeat ; Pas de carrelage. Les images ne sont affichées qu'une seule fois. */
background-repeat: répéter-x; /* Mosaïque horizontale (le long de l'axe des x) */
background-repeat: répéter-y; x-axis) Le long de l'axe y) */
background-repeat: Heherit; /* Hériter de l'attribut background-repeat de l'élément parent */
<html>
<head>
<style type="text/css">
body
{
background-image:url(图片123.jpg);
background-repeat:no-repeat;
}
</style>
</head>
<body>
</body>
</html>Attribut d'abréviation de l'arrière-plan
Vous pouvez combiner les différents attributs de l'arrière-plan sur une seule ligne au lieu de les écrire séparément à chaque fois. Le format est le suivant :
background: «color» «image» «position» «attachement» «repeat»
Par exemple, l'instruction suivante
background-color : transparent;
image d'arrière-plan : url(image.jpg);
position d'arrière-plan : 50 % 0 ;
pièce jointe d'arrière-plan : défilement ;
répétition d'arrière-plan : répéter-y;
peut être combiné en une seule ligne :
arrière-plan : url transparente (image.jpg) 50% 0 scroll répéter-y;
et il y a pas besoin de préciser à chacun une valeur. Si la valeur est omise, la valeur par défaut de l'attribut est utilisée. Par exemple, la ligne ci-dessus a le même effet que la suivante :
background: url (image.jpg) 50% 0 répétition-y;
<html>
<head>
<style type="text/css">
body
{
background:#ff0000 url(图片888.jpg) no-repeat fixed center;
}
</syle>
</head>
<body>
<p>各个属性间并无顺序</p>
<p>各个属性间并无顺序</p>
<p>各个属性间并无顺序</p>
<p>各个属性间并无顺序</p>
</body>
</html>
