Maison >interface Web >tutoriel CSS >Comment définir la couleur et l'image d'arrière-plan à l'aide de CSS
Comment définir la couleur et l'image d'arrière-plan à l'aide de CSS
- 不言original
- 2018-12-08 16:33:227192parcourir
Comment définir la couleur et l'image d'arrière-plan avec CSS : 1. Définissez la couleur d'arrière-plan via l'attribut background-color ; 2. Définissez l'image d'arrière-plan via l'attribut background-image.
L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.
Pour utiliser CSS pour définir l'arrière-plan, nous devons utiliser l'attribut background background. Grâce à l'attribut background, nous pouvons définir la couleur d'arrière-plan et l'image d'arrière-plan. avec CSS.
Jetons un coup d'oeil d'abordDéfinition CSS de la couleur d'arrière-plan
Nous devons utiliser background-color pour changer la couleur d'arrière-plan
background-color:value（颜色编码或者颜色名称）
Dans Dans la partie valeur, vous pouvez saisir un code de couleur tel que #000000 ou un nom de couleur tel que blanc, et la couleur définie sera la couleur d'arrière-plan.
La valeur initiale de background-color est transparente, auquel cas la couleur d'arrière-plan de l'élément parent sera appliquée. S'il n'y a aucun paramètre dans l'élément parent, il deviendra blanc.
Définition CSS de l'arrière-plan de l'image
En utilisant l'attribut background-image, nous pouvons prédéfinir l'image téléchargée sur le serveur comme arrière-plan.
background-image: url("图像的路径");Dans l'url, entrez le chemin d'accès au fichier image que vous souhaitez utiliser comme arrière-plan. Si le fichier CSS et le fichier image se trouvent dans le même répertoire, seul le nom du fichier conviendra.
Les chemins absolus et relatifs peuvent être utilisés comme chemins d'accès aux fichiers image.
Pour saisir un chemin relatif, saisissez le chemin relatif vers la feuille de style externe, et non le chemin relatif vers le fichier html.
Regardons ensuite un exemple spécifique
Utilisez background-color pour définir la couleur d'arrière-plan
Le code est le suivant
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
background-color: skyblue;
}
</style>
</head>
<body>
<p>Comment définir la couleur et limage darrière-plan à laide de CSS设置</p>
</body>
</html>Le résultat de l'exécution
affiche l'effet suivant sur le navigateur. La couleur bleu ciel spécifiée est définie comme couleur d'arrière-plan
Utilisez le paramètre d'image d'arrière-plan L'image d'arrière-plan
le code est le suivant
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body{
background-image: url("img/t.jpg");
}
</style>
</head>
<body>
<p>Comment définir la couleur et limage darrière-plan à laide de CSS设置</p>
</body>
</html>L'effet de course est illustré dans la figure ci-dessous
Lorsque la taille de l'écran est plus grande que l'image d'arrière-plan, la situation par défaut L'image d'arrière-plan est automatiquement répétée ci-dessous. Ce paramètre peut être modifié à l'aide de l'attribut background-repeat.
L'affichage de l'image d'arrière-plan commence dans le coin supérieur gauche du paramètre initial. Ce paramètre peut être modifié à l'aide de la propriété background-position
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!