CSS practical examples (recommended)_CSS/HTML

Background Background Set background color

<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 id="This-is-header">This is header 1</h1> <h2 id="This-is-header">This is header 2</h2> <p>This is a paragraph</p>
[Ctrl+A Select all Note: If you need to introduce external Js, you need to refresh to execute ]

Set one Picture as background

<style type="text/css"> body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg') } </style>
[Ctrl+A Select all Note: If you need to introduce external Js, you need to refresh to execute ]

Repeat vertically Background image

<style type="text/css"> body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg'); background-repeat: repeat } </style>
[Ctrl+A Select all Note: If you need to introduce external Js, you need to refresh to execute ]

Horizontal repeat background image

<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 Select all Note: If you need to introduce external Js, you need to refresh to execute ]

How to place the background image ( Position placement)

<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 to select all Note: If you need to introduce external Js, you need to refresh it to execute ]

背景不滚動

<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>画像はページの残りの部分と一緒にスクロールしません</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>
[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>これはテキストです</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>
[Ctrl+A 全选注:必要に応じて外部 Js 必要歯ブラシ新才能执行]