一、各種背景屬性
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 值，）
二、關于垂直對齊方式和過渡屬性
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 規定在過渡效果開始之前需要等待的時間，以秒或毫秒計，
三、漸變
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 他是用填充好的效果，重復填充 還沒填充的地方
四、雪碧圖和精靈圖
雪碧圖(將很多很多的小圖示放在一張圖片)、精靈圖(經過background-position)
方法：
1.運用PS切圖，把幾個部分粘貼到一個圖層，記下每個圖片的大小，同時大的粘貼板寬取所有圖寬的和，高取所有圖中的最大值
2.運用背景圖的方式插入，設定每個圖片的div大小，同時通過調整圖片位置background-position的方式達到準確添加背景圖的目的
好處：
1.加快加載速度
2.后期維護簡單
3.能減少圖片的位元組，曾經比較過多次3張圖片合并成1張圖片的位元組總是小于這3張圖片的位元組總和，
4.解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了
5.更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變，維護起來更加方便
缺點：
1、在圖片合并的時候，你要把多張圖片有序的合理的合并成一張圖片，還要留好足夠的空間，防止板塊內出現不必要的背景；這些還好，最痛苦的是在寬屏，高解析度的螢屏下的自適應頁面，你的圖片如果不夠寬，很容易出現背景斷裂；
2、至于可維護性，這是一般雙刃劍，可能有人喜歡，有人不喜歡，因為每次的圖片改動都得往這個圖片洗掉或添加內容，顯得稍微繁瑣，而且算圖片的位置（尤其是這種上千px的圖）也是一件頗為不爽的事情，當然，在性能的口號下，這些都是可以克服的，
3、由于圖片的位置需要固定為某個絕對數值，這就失去了諸如center之類的靈活性，
4、前面我們也提到了，必須限制盒子的大小才能使用CSS Sprites，否則可能會出現出現干擾圖片的情況，這就是說，在一些需要非單向的平鋪背景和需要網頁縮放的情況下，CSS Sprites并不合適，YUI的解決方式是，加大圖片之間的距離，這樣可以保持有限度的縮放，
以上“雪碧圖與精靈圖”解釋轉自CSDN博主「_52赫茲_」的原創文章
原文鏈接：https://blog.csdn.net/MYTLJP/article/details/78209698
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/90094.html
標籤：Html/Css
上一篇：第二章 需提前了解的術語和概念
下一篇：HTML常用標簽