1. 程式人生 > >CSS樣式設定網頁背景

CSS樣式設定網頁背景

首先我們要知道在HTML、CSS裡面,有關背景的設定都與background有關,比如background-color:background-image:等

1、background-color屬性-設定背景顏色

語法:background-color:顏色;

這裡的顏色可以直接用顏色名字,也可以使用三元色、十六進位制等;

如:background-color:rgba(0,0,0,.8);

2、background-image屬性-設定背景影象

語法:background-image:url(地址);

如:background-image:url(火影/1.png);

url是指向地址,圖片的名字必須加字尾,不同的流瀏覽器對格式也有不同的需求;

3、background-repeat屬性-背景重複

語法:background-repeat:重複方式;

相關方式有:no-repeat不重複、repeat-x向X方向重複、 repeat-y向Y方向重複、 repeat水平垂直都重複;

如:background-repeat:repeat;

這裡我們需要了解的是:HTML裡面也可以通過background來設定背景圖片,但是是不能通過此方法調整的;

4、background-position屬性-設定背景的位置

語法:background-position:位置;

相關位置:length(圖片與邊界的距離,cm、mm、px) 、percentage(頁面的寬度和高度的百分比) 、top(頂部)、 center(居中) 、bottom(底部)、 left 、right;

5、background-attachment屬性-控制背景圖片不動

語法:background-attachment:屬性值;

相關屬性值:scroll(預設值,當頁滾動條滾動時,背景跟著滾動)、fixed(背景不會懂);

在瀏覽器中瀏覽頁面時,當拖動滾動條時背景也會隨之移動,而此屬性就是固定背景的位置。

6、background-size屬性-背景大小

語法:background-size:屬性值;

相關屬性值:length(長度值,如:13px 13px表示長寬都是13px)、percentage(原圖的百分比0%~100%)、cover(保持寬高比,剛好覆蓋定義區域)、contain(同cover);

7、background-origin屬性-控制背景現實區域

語法:background-origin:屬性值;

相關屬性值:border-box(從元素盒模型的border區域開始顯示)、padding-box(從padding盒模型開始)、content-box(從content盒模型開始);

此屬性是方便控制背景圖片的顯示位置;