CSS編程學習制作背景教程

時間：2024-09-05 04:41:55 CSS

CSS編程學習制作背景教程

　　在CSS里面，每個元素盒子都可以想象成由兩個圖層組成。

CSS編程學習制作背景教程

　　前景層：內容（如文本或圖片）和邊框。

　　背景層：用實色填充（使用 background-color 屬性），也可以包含任意多個背景圖片（使用 background-image 屬性），背景圖片疊加在背景顏色之上。

　　在 CSS3 被瀏覽器實現之前，只能在背景顏色上添加一張圖片。而現在，我們可以為背景圖層添加多張圖片（以及 CSS3 漸變）。

　　CSS背景屬性：

　　background-color

　　background-image

　　background-repeat

　　background-position

　　background-size

　　background-attachment

　　background（簡寫屬性）

　　background-clip、background-origin、background-break（目前尚未得到廣泛支持）

　　背景顏色

　　格式：background-color: 顏色值;

　　示例：background-color: #caebff;

　　背景圖片

　　格式：background-image:url(圖片路徑/圖片文件名);

　　示例：background-image:url(images/blue_circle.png);

　　默認情況下背景圖片會以元素左上角為起點，沿水平和垂直方向重復出現，最終填滿整個背景區域。

　　背景重復

　　格式：background-repeat: repeat | repeat-x | repeat-y | no-repeat;

　　示例：background-repeat:repeat-x;

　　說明：

　　repeat 默認值，水平和垂直方向都重復，直至填滿元素的背景區域為止。

　　repeat-x 水平方向重復。

　　repeat-y 垂直方向重復。

　　no-repeat 任何方向上都不重復（只讓背景圖片顯示一次）。

　　背景位置

　　用于控制背景位置的 background-position 屬性，是所有背景屬性中最復雜的。

　　該屬性有5個關鍵字值，分別是 top、left、bottom、right 和 center，這些關鍵字中的任意兩個組合起來都可以作為該屬性的值。

　　background-position 屬性同時設定元素和圖片的原點。原點決定了元素和圖片中某一點的水平和垂直坐標。默認情況下，background-position的原點位于左上角。

　　第一種情況，使用關鍵字來設定位置。background-position屬性的默認值 top、left 控制著水平和垂直方向重復的起點。如修改起點位置：p#center {background-position:center center;}（簡化寫法：background-position:center，設定一個關鍵值，則另一個也會取相同的值。），背景圖片就會以段落的中心點為起點。

　　第二種情況，使用百分比來設定位置。

　　示例：background-position:50% 50%;，再把 background-repeat 設定為 no-repeat，就能實現了圖片在背景區域內居中的效果。第一個值表示水平位置，第二個值表示垂直位置。要是只設定一個值，則將其用來設定水平位置，而垂直位置會被設為 center。

　　第三種情況，使用絕對或相對單位的數值。要是使用像素單位來設定位置，那么圖片的左上角會被放在距離元素左上角指定位置的地方。另外，還可以使用負值，這樣可以把圖片的左上角定位到元素外部，從而在元素中只能看到部分圖片。當然也可以給圖片設定足夠大的正值，把圖片的右下角推到元素外部實現同樣的效果。

　　背景尺寸

　　background-size 是 CSS3 規定的屬性，用來控制背景圖片的尺寸。

　　可設定的值和含義如下：

　　50%：縮放圖片，使其填充背景區的一半。

　　100px 50px：把圖片調整到 100 像素寬，50 像素高。

　　cover：拉大圖片，使其完全填滿背景區；保持寬高比。

　　contain：縮放圖片，使其恰好適合背景區；保持寬高比。

　　注意：把很小的圖片拉大會導致圖片質量失真。

　　背景粘附

　　background-attachment屬性控制滾動元素內的背景圖片是否隨元素滾動而滾動。

　　屬性值有：

　　scroll。背景圖片隨元素移動。

　　fixed。背景圖片不會隨元素滾動而移動。

　　提示：background-attachment:fixed 最常用于給 body 元素中心位置添加淡色水印，讓水印不隨頁面滾動而移動。

　　簡寫背景屬性

　　示例：body {background:url(images/watermark.png) center #fff no-repeat contain fixed;}

　　說明：聲明中少寫了哪個屬性的值（比如沒寫 no-repeat），就會使用相應屬性的默認值（ repeat）。

　　多背景圖片

　　CSS3 可以給元素背景添加多個背景圖片。

　　示例：

　　CSS Code復制內容到剪貼板 p{ background: url(images/turq_spiral.png)30px-10pxno-repeat, url(images/pink_spiral.png)145px0pxno-repeat, url(images/gray_spiral.png)140px-30pxno-repeat,#ffbd75; }

　　背景漸變

　　漸變，就是在一定長度內兩種或多種顏色之間自然的過渡。

　　提示：漸變是 CSS 幫我們生成的背景圖片。添加漸變可以使用 background-image 屬性，也可以使用簡寫 background 屬性。

　　漸變分兩種：

　　線性漸變。從元素的一端延伸到另一端。

　　放射性漸變。從元素內一點向四周發散。

　　廠商前綴

　　為鼓勵瀏覽器廠商盡早采用 W3C 的 CSS3 推薦標準，于是就產生了 VSP（Vendor Specific Prefixes，廠商前綴）的概念。

　　示例：

　　transform 屬性的標準語法是這樣的：

　　transform: skewX(-45deg);

　　由于這個屬性還沒有完全定案，為保證在大多數瀏覽器以及它們的實驗性實現中能夠使用這個屬性，應該針對想要支持的瀏覽器為該屬性添加 VSP。每個瀏覽器只使用各自能理解的屬性聲明：

　　CSS Code復制內容到剪貼板 -moz-transform:skewX(-45deg);/*Firefox*/ -webkit-transform:skewX(-45deg);/*Chrome及Safari*/ -ms-transform:skewX(-45deg);/*微軟InternetExplorer*/ -o-transform:skewX(-45deg);/*Opera*/ transform:skewX(-45deg);/*最后是W3C標準屬性*/

　　以下 CSS3 屬性必須加 VPS：

　　CSS Code復制內容到剪貼板 border-imagetranslate linear-gradienttransition radial-gradientbackground* transformbackground-image* transform-origin >*針對背景圖片或漸變

【CSS編程學習制作背景教程】相關文章：

CSS入門教程01-25

CSS選擇器教程06-05

PPT制作教程10-13