平凡前端之路_08.CSS3的背景效果

CSS3的背景效果

CSS3 不再侷限於背景色、背景圖像的運用，還可以在一個元素上設置多層背景圖像。

指定背景圖像 - background-image

多張不同的背景和圖像用逗號隔開，先引入的圖像在上一層後引入則在下一層。

background-image可能的值	描述
url	使用絕對或相對地址指定背景圖像。
linear-gradient	使用線性漸變創建背景圖像。
radial-gradient	使用徑向漸變創建背景圖像。
repeating-linear-gradient	使用重複的線性漸變創建背景圖像。
repeating-radial-gradient	使用重複的徑向漸變創建背景圖像。

當背景顏色 - background-color 與 背景圖像 - background-image 共存時，背景顏色永遠在背景圖像之下。

指定背景的大小 - background-size

多張不同的背景時，可以分別指定背景的大小，以逗號隔開。當只有一個值時，表示所有的背景共用相同的背景大小。

background-size可能的值	描述
length	用長度值指定背景圖像大小。不允許負值。
percentage	用百分比指定背景圖像大小。不允許負值。
auto	背景圖像的真實大小。
cover	將背景圖像等比縮放到完全覆蓋容器，背景圖像有可能超出容器。
contain	將背景圖像等比縮放到寬度或高度與容器的寬度或高度相等，背景圖像始終被包含在容器內。

eg: 
	background-size: 60% 120px;
	background-size: auto 120px;
	background-size: cover;
	background-size: contain;

指定背景的起始位置 - background-origin

多張不同的背景時，可以分別指定背景的起始位置，以逗號隔開。當只有一個值時，表示所有的背景共用相同的背景起始位置。

background-origin可能的值	描述
padding-box	從padding區域（含padding）開始顯示背景圖像。
border-box	從border區域（含border）開始顯示背景圖像。
content-box	從content區域開始顯示背景圖像。

指定背景的繪製區域 - background-clip

多張不同的背景時，可以分別指定背景的繪製區域，以逗號隔開。當只有一個值時，表示所有的背景共用相同的背景繪製區域。

background-size可能的值	描述
padding-box	從padding區域（不含padding）開始向外裁剪背景。
border-box	從border區域（不含border）開始向外裁剪背景。
content-box	從content區域開始向外裁剪背景。
text	從前景內容的形狀（比如文字）作爲裁剪區域向外裁剪，如此即可實現使用背景作爲填充色之類的遮罩效果。

指定背景的混合模式 - background-blend-mode

多張不同的背景時，可以分別指定背景的混合模式，以逗號隔開。當只有一個值時，表示所有的背景共用相同的背景混合模式。

background–blend-mode可能的值	描述
normal	默認值。設置正常的混合模式。
multiply	正片疊底模式。
screen	濾色模式。
overlay	疊加模式。
darken	變暗模式。
lighten	變亮模式。
color-dodge	顏色減淡模式。
saturation	飽和度模式。
color	顏色模式。
luminosity	亮度模式。

背景簡寫 - background

CSS 可以使用背景簡寫 - background，用於一次性集中定義各種背景屬性。

background屬性值	描述
background-color	指定背景顏色。
background-image	指定背景圖像。
background-repeat	指定背景如何鋪排填充。
background-attachment	指定背景是隨對象內容滾動還是固定的。
background-position	指定背景位置。
background-origin	指定背景的起始位置。
background-clip	指定背景的繪製區域。
background-size	指定背景的尺寸大小。

/** 約定的簡寫順序 */
background: [background-color] 
			[background-image] 
			[background-repeat] 
			[background-attachment] 
			[background-position] / [ background-size] 
			[background-origin] 
			[background-clip];
/**	
	在簡寫形式下，background-size不會脫離background-position單獨出現，
	當background-position後面接着寫background-size時，以	/ 分隔    
*/
eg: 
  background: aquamarine 
              url(img.png) 
              no-repeat	/* background-repeat-x: no-repeat; background-repeat-y: no-repeat;相同可省略第二個*/
              scroll 
              center top / 50% /* background-position-x: center ; background-position-y: top;相同可省略第二個*/
              content-box 
              content-box;

如果省略某個屬性不寫，那麼將自動取缺省值。

background-color只能設置一次。

CSS3邊框圖像

使用 CSS3 border-image 屬性，可以給元素使用圖像製作邊框。

指定邊框圖像 - border-image-source

border-image-source可能的值	描述
url	使用絕對或相對地址指定背景圖像。
linear-gradient	使用線性漸變創建背景圖像。
radial-gradient	使用徑向漸變創建背景圖像。
repeating-linear-gradient	使用重複的線性漸變創建背景圖像。
repeating-radial-gradient	使用重複的徑向漸變創建背景圖像。

邊框圖像可以使用徑向漸變和顏色透明製作圓角邊框。

指定邊框圖像切片 - border-image-slice

border-image-slice可能的值	描述
number	數字值，不帶單位，代表圖像中像素（如果是光柵圖像）或矢量座標（如果是矢量圖像）。
%	相對於圖像尺寸的百分比值：圖像的寬度影響水平偏移，高度影響垂直偏移。
fill	保留邊框圖像的中間部分。

border-image-slice: [top] [right] [bottom] [left];
border-image-slice: [top] [right-left] [bottom];
border-image-slice: [top-bottom] [right-left];
border-image-slice: [top-right-bottom-left];

指定邊框圖像切片，指定4個值(4條分割線：top, right, bottom, left)將 border-image-source 分割成9宮格：四個角、四條邊以及一箇中間區域。

除非使用了補充關鍵詞 fill，否則中間的圖像部分會被丟棄。

指定邊框圖像寬度 - border-image-width

border-image-width可能的值	描述
1	默認值。表示相應的border-width的1倍值。
number	表示相應的border-width 的倍數。
length	規定以具體單位的值，比如像素等。
%	邊界圖像區域的大小：橫向偏移的寬度的面積，垂直偏移的高度的面積
auto	如果指定了，寬度是相應的image slice的內在寬度或高度

border-image-width: [top] [right] [bottom] [left];
border-image-width: [top] [right-left] [bottom];
border-image-width: [top-bottom] [right-left];
border-image-width: [top-right-bottom-left];

指定邊框圖像四邊寬度，屬性可以有1到4個值（以 top 方向逆時針）。

不可使用border-width的關鍵字thin （細的邊框）medium（中等的邊框）thick（粗的邊框）。

指定邊框圖像外延伸 - border-image-outset

border-image-outset可能的值	描述
0	默認值。不延伸。
length	規定以具體單位的值，比如像素等。
number	代表對應的 border-width 的倍數。

指定邊框圖像重複 - border-image-repeat

border-image-repeat可能的值	描述
stretch	默認值。拉伸圖像來填充區域，不重複圖像。
repeat	不進行拉伸，不湊整，重複圖像。
round	round會湊整填充（進行了適度的拉伸），重複圖像。
space	space會湊整填充（進行了適度的拉伸），重複圖像，重複圖像之間有一定的空隙。

邊框圖像簡寫 - border-image

CSS 可以使用邊框圖像簡寫 - border-image，用於一次性集中定義各種邊框圖像屬性。

border-image屬性值	描述
border-image-source	指定邊框圖像。
border-image-slice	指定邊框圖像向切片。
border-image-width	指定邊框圖像的寬度。
border-image-outset	指定邊框圖像外延伸。
border-image-repeat	指定邊框圖像重複。

/** 約定的簡寫順序 */
border-image: [border-image-source]
 			  [border-image-slice] / [border-image-width] / [border-image-outset]
 			  [border-image-repeat];
eg:
  border-image: url(img.png)
  				50 30 20 40 fill / 1.5 1.3 1.2 1.4 / 1
  				stretch;
/*省略border-image-width*/
  border-image: url(img.png)
  				50 / / 1
  				repeat;
/*省略border-image-width、border-image-outset*/
  border-image: url(img.png)
  				50 
  				repeat;

如果省略某個屬性不寫，那麼將自動取默認值。

CSS 知識題

題目	答案
去除文字下劃線	text-decoration: none
設置文字描邊屬性	-webkit-text-stroke
設置顏色、圖片轉換成灰白效果	filter: grayscale(100%)
設置文本、圖片不能被選擇	user-select：none
三色法國國旗	background: linear-gradient(to left, red 33%, white 33%, white 66%, blue 66%);
設置文字不換行	white-space: nowrap
設置文字自動換行	word-wrap: break-word
設置文字強制換行	word-break: break-all