css背景樣式

標籤：linear   table   lin   tran   背景圖片   parent   repeat-y   osi   透明   

---------顏色表示方法

background: --

1) red  -- 英文單詞

2) #ff0000 -- 16進位

3) rgb(255,0,0) --3元色

4) rgb(100%, 0%, 0%) --百分比

---------背景圖片起始位置

background-origin: padding-box / border-box / content-box;

圖片邊框起始  內邊距起始  內容起始

---------背景色起始位置

background-clip: boder-box / padding-box / content-box;

邊框起始  內邊距起始  內容起始

例: 如背景色黃色 邊框起始 邊框邊框也為黃

---------設定背景圖片大小

background-size:寬度px 高度px;

background-size: length / percentage / cover / contain;

Value	Description
length	用數值來設定圖片的寬度和高度,第一個值為寬度,第二個值為高度,如果只設定一個值,那第二個被設為auto.
percentage	用百分比來設定圖片的寬度和高度,第一個值為寬度,第二個值為高度,如果只設定一個值,那第二個被設為auto.
cover	以圖片自身的尺寸比例來展開圖片以封滿某個元素.
contain	以圖片自身的尺寸比例來展開或縮小圖片以但某個元素能完全顯示此圖片

 

---------背景顏色

background/background-color: #000000 - #FFFFFF / red blue green… ;

---------背景插入圖片

background-image: url(“地址”)/過度;

例:background-image: -webkit-linear-greadient( -- , -- , -- )

---------背景顏色圖片疊加

background: red url() no-repeat -- --;

---------多背景圖

background: url(‘ ’) no-repeat -- -- , url(‘ ’) no-repeat -- --/-- --;

1圖片 2圖片/大小

---------背景色hsl

background: hsl( h , s , l );

h: 色調 0-紅 120-綠 240-蘭 0-360

s: 飽和度 0-100%

l: 亮度 0-100%  0%為黑

---------背景圖片平鋪

background-repeat: repeat / no-repeat / repeat-x / repeat-y;

平鋪/不平鋪/水平平鋪/垂直平鋪

---------背景圖片定位

background-position: 水平px  垂直px / 水平%  垂直% / 關鍵詞(center置中);

top left / top center / top right  -a/b方位前後可互換

left center/ center center / right center

bottom left/ bottom center / bottom right

---------背景關聯

background-attachment: scroll / fixed /inherit; 滾動/固定/繼承

---------單選邊框

border-left/top/right/bottom; 左/上/右/下

---------邊框寬度

border-width:0 – 99999px;

border-width:thin medium thick 10px;

上邊框是細邊框

右邊框是中等邊框

下邊框是粗邊框

左邊框是 10px 寬的邊框

3值: 上 左右 下 

2值: 上下 左右

---------邊框樣式

border-style: solid / dashed / double / transparent

單實線/虛線/雙實線/透明

---------邊框顏色

border-color: #000000 - #FFFFFF / red blue green… ;

---------border複合樣式寫法

border/ border-left/ … : width  style  color; 線寬 樣式 顏色

border: 1px  solid  red;

---------background複合樣式寫法

background: url(“路徑”)  repeat  position; 路徑 平鋪 位置

background: url(“a.jpg”)  no-repeat  center;

css背景樣式