Maison > Article > interface Web > Comment mettre des images en CSS
Comment mettre des images en CSS
- 藏色散人original
- 2021-04-25 10:07:2646501parcourir
Comment mettre des images en CSS : 1. Utilisez l'attribut d'abréviation d'arrière-plan pour introduire des images lors de la définition de l'arrière-plan ; 2. Utilisez directement l'attribut background-image pour introduire des images d'arrière-plan.
L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.
Comment mettre des images en CSS ?
Avec le développement d'Internet, la vitesse du réseau continue d'augmenter et nos pages Web actuelles sont devenues plus riches. En plus de pouvoir transmettre du texte, nous pouvons également transmettre des images. Comment utilisons-nous le CSS pour placer des images sur des pages Web ? Voyons comment utiliser CSS pour placer des images sur des pages Web.
CSS peut utiliser l'attribut d'abréviation d'arrière-plan pour introduire des images lors de la définition de l'arrière-plan, ou utiliser l'attribut background-image pour introduire des images d'arrière-plan. La propriété background-image définit l'image d'arrière-plan de l'élément.
Utilisez l'attribut d'abréviation d'arrière-plan pour introduire les images :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body
{
background: #00ff00 url('img/3.jpg') no-repeat fixed center;
}
</style>
</head>
<body>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
<p>This is some text</p>
</body>
</html>Rendu :
Utilisez l'attribut background-image pour placer des images dans le page Web :
<html>
<head>
<style type="text/css">
body {background-image:url(/i/eg_bg_04.gif);}
</style>
</head>
<body></body>
</html>Rendu :
attribut de raccourci d'arrière-plan :
l'attribut de raccourci d'arrière-plan définit tous les attributs d'arrière-plan dans une seule instruction.
Vous pouvez définir les attributs suivants :
background-color background-position background-size background-repeat background-origin background-clip background-attachment background-image
Si vous ne définissez aucune des valeurs, il n'y aura aucun problème. Par exemple, background:#ff0000 url('smiley.gif. '); est également autorisé.
Il est généralement recommandé d'utiliser cet attribut au lieu d'utiliser des attributs individuels individuellement, car il est mieux pris en charge dans les navigateurs plus anciens et nécessite la saisie de moins de lettres. Attribut
background-image : L'attribut
background-image définit l'image d'arrière-plan de l'élément. L'arrière-plan d'un élément
occupe toute la taille de l'élément, y compris le remplissage et les bordures, mais pas les marges.
Par défaut, l'image d'arrière-plan est placée dans le coin supérieur gauche de l'élément et se répète horizontalement et verticalement.
Conseil : Veuillez définir une couleur d'arrière-plan disponible afin que la page soit belle même si l'image d'arrière-plan n'est pas disponible.
Valeur de l'attribut :
url('URL') Chemin pointant vers l'image.
aucun Valeur par défaut. Aucune image d'arrière-plan n'est affichée.
inherit spécifie que le paramètre de la propriété background-image doit être hérité de l'élément parent.
[Apprentissage recommandé : Tutoriel vidéo CSS]
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!