Maison > interface Web > tutoriel CSS > Comment définir l'arrière-plan pour qu'il reste inchangé en CSS

Comment définir l'arrière-plan pour qu'il reste inchangé en CSS

藏色散人
Libérer: 2023-01-04 09:35:31
original
4127 Les gens l'ont consulté

Comment définir l'arrière-plan à corriger avec CSS : créez d'abord un exemple de fichier HTML ; puis entrez la balise head et le code de la balise de style CSS ; puis entre les balises de style, entrez le code qui définit l'image d'arrière-plan de ; la page Web ; enfin, définir l'attribut "background" -repeat:no-repeat" suffit.

Comment définir l'arrière-plan pour qu'il reste inchangé en CSS

L'environnement d'exploitation de cet article : système Windows 7, version HTML5&&CSS3, ordinateur Dell G3.

Nous ouvrons d'abord le programme du bloc-notes système et entrons le code de base de la page Web

<html>
 <body>
 </body>
</html>
Copier après la connexion

Comment définir larrière-plan pour quil reste inchangé en CSS

Entrez ensuite la balise head et le code de la balise de style CSS

<head>
  <style type="text/css">
  </style>
</head>
Copier après la connexion

Comment définir larrière-plan pour quil reste inchangé en CSS

Cliquez entre les balises de style et saisissez le code qui définit l'image de fond de la page web

body
{ 
  background-image:url(&#39;d:/bg.gif&#39;);
}
Copier après la connexion

Comment définir larrière-plan pour quil reste inchangé en CSS

Puis saisissez certaines balises body et du contenu sous la balise body

<body>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
<p>图像不会随页面滚动。</p>
</body>
Copier après la connexion

Comment définir larrière-plan pour quil reste inchangé en CSS

Cliquez sur le fichier, enregistrez en tant que commande, enregistrez le contenu au format html et ouvrez la page Web pour en prévisualiser.

Comment définir larrière-plan pour quil reste inchangé en CSS

Tout le monde a constaté que dans cette situation, lorsque l'on fait défiler la molette de la souris, le contenu de la page Web et l'image de fond défilent en même temps. Pour faciliter la visualisation, nous modifions le. code afin que l'image ne s'affiche pas à plusieurs reprises.

<style type="text/css">
body 
{
background-image:url(d:/bg.gif);
background-repeat:no-repeat;
}
</style>
Copier après la connexion

Puis prévisualisez l'effet.

Comment définir larrière-plan pour quil reste inchangé en CSS

De cette façon, vous pouvez voir clairement le changement de l'image d'arrière-plan Afin de corriger l'image d'arrière-plan, nous modifions le code en

<style type="text/css">
body 
{
background-image:url(d:/bg.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
</style>
Copier après la connexion

et prenons. un regard sur l'effet.

Comment définir larrière-plan pour quil reste inchangé en CSS

[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
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal