Exemples pratiques CSS (recommandé)_CSS/HTML

Fond d'écran Définir la couleur d'arrière-plan

<style type="text/css"> body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} </style> <h1>C'est l'en-tête 1</h1> <h2>C'est l'en-tête 2</h2> <p>Ceci est un paragraphe</p>
[Ctrl+A Tout sélectionner Remarque : Si vous devez introduire des J externes, vous devez actualiser pour exécuter ]

Définir une image comme arrière-plan

<style type="text/css"> body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg') } </style>
[Ctrl+A Tout sélectionner Remarque : Si vous devez introduire des J externes, vous devez actualiser pour exécuter ]

Répéter verticalement l'image d'arrière-plan

<style type="text/css"> body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg'); background-repeat: repeat } </style>
[Ctrl+A Tout sélectionner Remarque : Si vous devez introduire des J externes, vous devez actualiser pour exécuter ]

Image d'arrière-plan à répétition horizontale

<style type="text/css"> body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg'); background-repeat: repeat-x } </style>
[Ctrl+A Tout sélectionner Remarque : Si vous devez introduire des J externes, vous devez actualiser pour exécuter ]

Comment placer l'image de fond (Placement de position)

<style type="text/css"> body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg'); background-repeat: no-repeat; background-position: center; } </style>
[Ctrl+A pour tout sélectionner Remarque : Si vous devez introduire des J externes, vous devez l'actualiser pour l'exécuter ]

背景不滚动

<style type="text/css"> body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/smiley.gif'); background-repeat: no-repeat; background-attachment: fixed } </style> <p>L'image ne défilera pas avec le reste de la page</p> <p>L'image ne défilera pas avec le reste de la page</p> <p>L'image ne défilera pas avec le reste de la page</p> <p>L'image ne défilera pas avec le reste de la page</p> <p>L'image ne défilera pas avec le reste de la page</p> <p>L'image ne défilera pas avec le reste de la page</p> <p>L'image ne défilera pas avec le reste de la page</p> <p>L'image ne défilera pas avec le reste de la page</p> <p>L'image ne défilera pas avec le reste de la page</p> <p>L'image ne défilera pas avec le reste de la page</p> <p>L'image ne défilera pas avec le reste de la page</p> <p>L'image ne défilera pas avec le reste de la page</p> <p>L'image ne défilera pas avec le reste de la page</p> <p>L'image ne défilera pas avec le reste de la page</p> <p>L'image ne défilera pas avec le reste de la page</p> <p>L'image ne défilera pas avec le reste de la page</p> <p>L'image ne défilera pas avec le reste de la page</p> <p>L'image ne défilera pas avec le reste de la page</p> <p>L'image ne défilera pas avec le reste de la page</p> <p>L'image ne défilera pas avec le reste de la page</p> <p>L'image ne défilera pas avec le reste de la page</p> <p>L'image ne défilera pas avec le reste de la page</p> <p>L'image ne défilera pas avec le reste de la page</p> <p>L'image ne défilera pas avec le reste de la page</p>
[Ctrl+A 全选:如需引入外部Js需刷新才能执行]

背景属性一行解决（用一行文字定义背景属性）

<style type="text/css"> body { background: #00ff00 url('http://www.blueidea.com/articleimg/2006/07/3744/smiley.gif') no-repeat fixed center; } </style> <p>Ceci est un texte</p> <p>Ceci est un texte</p> <p>Ceci est un texte</p> <p>Ceci est un texte</p> <p>Ceci est un texte</p> <p>Ceci est un texte</p> <p>Ceci est un texte</p> <p>Ceci est un texte</p> <p>Ceci est un texte</p> <p>Ceci est un texte</p> <p>Ceci est un texte</p> <p>Ceci est un texte</p> <p>Ceci est un texte</p> <p>Ceci est un texte</p> <p>Ceci est un texte</p> <p>Ceci est un texte</p> <p>Ceci est un texte</p> <p>Ceci est un texte</p> <p>Ceci est un texte</p> <p>Ceci est un texte</p> <p>Ceci est un texte</p> <p>Ceci est un texte</p> <p>Ceci est un texte</p> <p>Ceci est un texte</p>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]