简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > Questions et réponses frontales > le corps du texte

Comment mettre des images en CSS

藏色散人
Libérer： 2023-01-05 16:11:07
original
46650 Les gens l'ont consulté

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.

Comment mettre des images en CSS

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(&#39;img/3.jpg&#39;) 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>
Copier après la connexion

Rendu :

Comment mettre des images en CSS

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>
Copier après la connexion

Rendu :

Comment mettre des images en CSS

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
Copier après la connexion

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!

Étiquettes associées：
css
source：php.cn
Article précédent：Comment définir la position de l'image d'arrière-plan en CSS Article suivant：Comment définir la couleur de la police en CSS
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Où sont les didacticiels sur la cartographie mentale CSS ? Didacticiel
Depuis 2024-04-16 10:10:18
0
0
1335
La page ne peut soudainement plus extraire le CSS ou le bootstrap Je suis donc en train de développer une page, j'en ai fait une partie hier et ça a très bi...
Depuis 2024-04-06 21:58:04
0
1
800
Modifier dynamiquement les styles CSS en ligne dans Javafx J'essaie de changer l'image d'arrière-plan d'un volet lorsque l'application est agrandie. ...
Depuis 2024-04-06 20:57:16
0
1
487
Comment empiler les éléments flottants verticalement plutôt qu'horizontalement en CSS ? J'essaie de créer une page Web avec deux colonnes, avec le contenu principal d'un côté et ...
Depuis 2024-04-06 20:45:26
0
2
386
Existe-t-il un moyen de forcer le texte de la flexbox à être centré verticalement, quel que soit l'autre code CSS dont nous disposons ? J'ai le code CSS suivant qui fait partie d'un code CSS plus vaste utilisé dans un site Web...
Depuis 2024-04-06 20:41:51
0
1
518
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！