CSS入門（背景各類屬性的詳解、垂直居中和過渡效果的詳解、漸變效果的簡單講解、雪碧圖和精靈圖）

1、各類背景屬性

1.background-image 屬性爲元素設置背景圖像。

元素的背景佔據了元素的所有尺寸，包括內邊距和邊框，但不包括外邊距。

默認地，背景圖像位於元素的左上角，並在水平和垂直方向上重複。

提示：請設置一種可用的背景顏色，這樣的話，假如背景圖像不可用，頁面也可得到良好的視覺效果。

屬性值:
url('URL') 　　指向圖像的路徑。
none 　　　　 默認值。不顯示背景圖像。
inherit 　　　 規定應該從父元素繼承 background-image 屬性的設置。

 

2.background-size 屬性規定背景圖像的尺寸。

語法:
background-size: length|percentage|cover|contain;

屬性值：
length　　　　設置背景圖像的高度和寬度。第一個值設置寬度，第二個值設置高度。若是隻設置一個值，則第二個值會被設置爲 "auto"。
percentage 　 以父元素的百分比來設置背景圖像的寬度和高度。第一個值設置寬度，第二個值設置高度。若是隻設置一個值，則第二個值會被設置爲 "auto"。
cover 　　　   把背景圖像擴展至足夠大，以使背景圖像徹底覆蓋背景區域。背景圖像的某些部分也許沒法顯示在背景定位區域中。
contain 　　   把圖像圖像擴展至最大尺寸，以使其寬度和高度徹底適應內容區域。

 

3.background-repeat 屬性設置是否及如何重複背景圖像。

默認地，背景圖像在水平和垂直方向上重複。

屬性值:
repeat　　　　默認。背景圖像將在垂直方向和水平方向重複。
repeat-x 　　 背景圖像將在水平方向重複。
repeat-y 　　 背景圖像將在垂直方向重複。
no-repeat 　  背景圖像將僅顯示一次。
inherit 　　　 規定應該從父元素繼承 background-repeat 屬性的設置。

 

4.background-attachment 屬性設置背景圖像是否固定或者隨着頁面的其他部分滾動。

屬性值:
scroll 　　 默認值。背景圖像會隨着頁面其他部分的滾動而移動。
fixed 　　  當頁面的其他部分滾動時，背景圖像不會移動。
inherit 　　規定應該從父元素繼承 background-attachment 屬性的設置。

 

5.background-position 屬性設置背景圖像的起始位置。

這個屬性設置背景原圖像（由 background-image 定義）的位置，背景圖像若是要重複，將從這一點開始。

提示：您須要把 background-attachment 屬性設置爲 "fixed"，才能保證該屬性在 Firefox 和 Opera 中正常工做。

屬性值：

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

（若是您僅規定了一個關鍵詞，那麼第二個值將是"center"。默認值：0% 0%。）

x% y%

（第一個值是水平位置，第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。若是您僅規定了一個值，另外一個值將是 50%。）

xpos ypos

（第一個值是水平位置，第二個值是垂直位置。左上角是 0 0。單位是像素 (0px 0px) 或任何其餘的 CSS 單位。若是您僅規定了一個值，另外一個值將是50%。您能夠混合使用 % 和 position 值。）

2、關於垂直對齊方式和過渡屬性

1.vertical-align 屬性設置元素的垂直對齊方式。

屬性值:

baseline 　　　　默認。元素放置在父元素的基線上。

sub 　　　　　　垂直對齊文本的下標。

super 　　　　　垂直對齊文本的上標

top 　　　　　　把元素的頂端與行中最高元素的頂端對齊

text-top　　　　把元素的頂端與父元素字體的頂端對齊

middle　　   　　把此元素放置在父元素的中部。

bottom　　  　　把元素的頂端與行中最低的元素的頂端對齊。

text-bottom 　　把元素的底端與父元素字體的底端對齊。

length

% 　　　　　　  使用 "line-height" 屬性的百分比值來排列此元素。容許使用負值。

inherit 　　　　  規定應該從父元素繼承 vertical-align 屬性的值。

2.transition 屬性是一個簡寫屬性，用於設置四個過渡屬性：

語法：

transition: property duration timing-function delay;

屬性值:

transition-property 規定設置過渡效果的 CSS 屬性的名稱。

transition-duration 規定完成過渡效果須要多少秒或毫秒。

transition-timing-function 規定速度效果的速度曲線。

transition-delay 定義過渡效果什麼時候開始。

 

(1).transition-property表明的屬性值以及相關用法(規定設置過渡效果的 CSS 屬性的名稱)

語法:
transition-property: none|all|property;

屬性值:

none 　　 沒有屬性會得到過渡效果。
all 　　　  全部屬性都將得到過渡效果。
property   定義應用過渡效果的 CSS 屬性名稱列表，列表以逗號分隔。

 

(2).transition-duration表明的屬性值以及相關用法(規定完成過渡效果須要多少秒或毫秒)

語法:
transition-duration: time;

屬性值:

time
規定完成過渡效果須要花費的時間（以秒或毫秒計）。默認值是 0，意味着不會有效果。

 

(3).transition-timing-function表明的屬性值以及相關用法(規定速度效果的速度曲線)

語法:transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

屬性值:

linear 規定以相同速度開始至結束的過渡效果（等於 cubic-bezier(0,0,1,1)）。

ease 規定慢速開始，而後變快，而後慢速結束的過渡效果（cubic-bezier(0.25,0.1,0.25,1)）

ease-in 規定以慢速開始的過渡效果（等於 cubic-bezier(0.42,0,1,1)）。

ease-out 規定以慢速結束的過渡效果（等於 cubic-bezier(0,0,0.58,1)）。

ease-in-out 規定以慢速開始和結束的過渡效果（等於 cubic-bezier(0.42,0,0.58,1)）。

cubic-bezier(n,n,n,n) 在 cubic-bezier 函數中定義本身的值。可能的值是 0 至 1 之間的數值。

 

(4).transition-delay表明的屬性值以及相關用法(規定過渡效果什麼時候開始)

語法:

transition-delay: time;

屬性值:

time 規定在過渡效果開始以前須要等待的時間，以秒或毫秒計。

3、漸變

1.什麼是漸變？

兩種或者多種顏色間平滑度過的效果。

2.分類：

(1).線型漸變
(2).徑向漸變
(3).重複漸變 加上 repeating

3.漸變的組成

(1).線型漸變

色標：決定了漸變的每種顏色及出現的位置
每一個漸變效果都是由多個色標組成（2個以上）

語法：linear-gradient([<angle(方向)> | to <side-or-corner(角度大小)>]? , <color-stop-list(起始顏色)>)

屬性值:

 

angle:

to top　　　　　　從下往上

to bottom　　　　 從上往下

to left　　　　　　從右往左

to right　　　　　 從左往右

to top right　　　 從左下往右上

to top left　　　　從右下往左上

to bottom right　  從左上往右下

to bottom left　　 從右上往左下

 

side-or-corner:

接受一個表示角度的值（可用的單位deg、rad、grad或turn）

0deg(度)　對應　to top
90deg　　對應　to right
180deg　 對應　to bottom
270deg　 對應　to left

中途省略的是漸變顏色的第一個顏色爲起始顏色(若只有一個顏色值則這個顏色爲終止點的顏色)

在第一個和最後一個顏色之間的顏色爲中間色，全部顏色會以設定的方向在未給予顏色區域大小的時候平均漸變顏色。

 

color-stop-list:<color-stop>=<color>I <dength>I <percentage>]

接受一系列顏色節點（終止點的顏色）

<color>：指定顏色。
<length>：用長度值指定起止色位置。不容許負值
<percentage>：用百分比指定起止色位置。

 

(2).徑向漸變

語法：radial-gradient([side] at [position]? , <color-stop-list(起始顏色)>)

屬性值:

size ：

圓的半徑 單位爲px

position:x y

接受一個表示圓心的位置的值（可用的單位:px、百分比、top center bottom left right）

中途省略的是漸變顏色的第一個顏色爲起始顏色(若只有一個顏色值則這個顏色爲終止點的顏色)

在第一個和最後一個顏色之間的顏色爲中間色，全部顏色會以設定的方向在未給予顏色區域大小的時候平均漸變顏色。

 

color-stop-list:<color-stop>=<color>I <dength>I <percentage>]

接受一系列顏色節點（終止點的顏色）

<color>：指定顏色。
<length>：用長度值指定起止色位置。不容許負值
<percentage>：用百分比指定起止色位置。

(3).重複漸變

原有基礎前面加上 repeating

repeating-linear-gradient()(重複的線性漸變)

語法跟上面的 linear-gradient() 是同樣的。

只不過 linear-gradient 後面沒填充完的 地方用了最後一個顏色填充。

repeating-linear-gradient 他是用填充好的效果，重複填充 還沒填充的地方

 

repeating-radial-gradient()(重複的鏡像漸變)

語法和上面同樣。

只不過 radial-gradient 後面沒填充完的 地方用了最後一個顏色填充。

repeating-radial-gradient 他是用填充好的效果，重複填充 還沒填充的地方

 4、雪碧圖和精靈圖

雪碧圖(將不少不少的小圖標放在一張圖片)、精靈圖(通過background-position)
方法：

1.運用PS切圖，把幾個部分粘貼到一個圖層，記下每一個圖片的大小，同時大的粘貼板寬取全部圖寬的和，高取全部圖中的最大值
2.運用背景圖的方式插入，設置每一個圖片的div大小，同時經過調整圖片位置background-position的方式達到準確添加背景圖的目的

好處：

1.加快加載速度
2.後期維護簡單
3.能減小圖片的字節，曾經比較過屢次3張圖片合併成1張圖片的字節老是小於這3張圖片的字節總和。
4.解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就能夠了
5.更換風格方便，只須要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就能夠改變。維護起來更加方便

缺點：

一、在圖片合併的時候，你要把多張圖片有序的合理的合併成一張圖片，還要留好足夠的空間，防止板塊內出現沒必要要的背景；這些還好，最痛苦的是在寬屏，高分辨率的屏幕下的自適應頁面，你的圖片若是不夠寬，很容易出現背景斷裂； 
二、至於可維護性，這是通常雙刃劍。可能有人喜歡，有人不喜歡，由於每次的圖片改動都得往這個圖片刪除或添加內容，顯得稍微繁瑣。並且算圖片的位置（尤爲是這種上千px的圖）也是一件頗爲不爽的事情。固然，在性能的口號下，這些都是能夠克服的。 
三、因爲圖片的位置須要固定爲某個絕對數值，這就失去了諸如center之類的靈活性。 
四、前面咱們也提到了，必須限制盒子的大小才能使用CSS Sprites，不然可能會出現出現干擾圖片的狀況。這就是說，在一些須要非單向的平鋪背景和須要網頁縮放的狀況下，CSS Sprites並不合適。YUI的解決方式是，加大圖片之間的距離，這樣能夠保持有限度的縮放。

以上「雪碧圖與精靈圖」解釋轉自CSDN博主「_52赫茲_」的原創文章

原文連接：https://blog.csdn.net/MYTLJP/article/details/78209698