CSS 實用實例(推薦)_CSS/HTML

Background 背景 設定背景顏色

<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>This is header 1</h1> <h2>This is header 2</h2> <p>This is a paragraph</p>
[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

設定一等。張圖片做為背景

<style type="text/css"> body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg') } </style>
[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

垂直重複背景圖片

<style type="text/css"> body { background-image: url('http://www.blueidea.com/articleimg/2006/07/3744/bgdesert.jpg'); background-repeat: repeat } </style>
[Ctrl+A 全選注:如需引入外部Js需刷新才能執行]

水平重複背景圖片

<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 全選注:如需引入外部Js需刷新才能執行]

怎麼放置背景圖片（位置擺放）

<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 全選 註:如需引入外部Js需刷新才能執行]

背景不滾動

<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 需刷新才能執行]