強大的CSS:顏色、背景和剪下

智雲程式設計發表於2019-05-18

顏色

CSS 中可以改變文字的顏色還有元素的背景顏色。可以用顏色關鍵字來定義顏色,如 red ,但是這些顏色關鍵字並不常用。

transparent

transparent 可以讓文字或背景變的完全透明的顏色,它就像 rgba(0,0,0,0) 的縮寫。

currentColor

currentColor 代表原始的 color 屬性的計算值。比如當前元素 color 為紅色,背景色設定為 currentColor ,那麼現在背景色也為紅色。

rgb、rgba

顏色還可以用 rgb 函式表示,如 rgb(255, 255, 255) 代表白色,它每個引數的取值範圍是 255 ,它是用不同比例的紅、綠、藍來組成期望顏色。

rgba 函式代表紅-綠-藍-阿爾法,其中的 a 是透明度,取值範圍是 1

除了使用 rgb 函式,還可以使用 16 進位制來表示,它的語法是 #RRGGBB ,如果 #f3f3f3 ,代表 f3 (16 進位制)數量的紅-綠-藍。如果紅-綠-藍數值兩兩相等,如 #ffffff ,就可以簡寫成 3 位 16 進位制的形式 #fff 。在高版本的瀏覽器還可以用 16 進製表示透明度 #RRGGBBAA AA 的取值範圍是 255 ,如果兩兩相等也可以簡寫成 #RGBA 形式。

hsl、hsla

hsl 函式是用色相-飽和度-明度(Hue-saturation-lightness)來表示顏色, HSL 相比 RGB  的優點是更加直觀:你可以估算你想要的顏色,然後微調,比如要找到一個顏色的相近色,只需調整一下明度就行了。

色相(Hue)表示色環(即代表彩虹的一個圓環)的一個角度。這個角度作為一個無單位的 被給出,大致按照數值紅、橙、黃、綠、青、藍、紫變化節奏。取值範圍是 360

飽和度,取值 0% 100% ,100% 是滿飽和度,而 0% 是一種灰度。 明度,取值 0% 100% ,100% 明度是白色, 0% 明度是黑色,而 50% 明度是“一般的”。

hsla rgba 相似其中的 a 設定透明度,取值範圍也是 1

系統顏色

系統顏色就是系統的顏色,不同的系統支援的顏色可能不同,一般很少使用。但是我們可以利用它實現系統主題風格類似的 Web 元件皮膚效果,來以假亂真。

強大的CSS:顏色、背景和剪下

背景

CSS2.1中有5個 background 屬性可以用來控制元素的背景。

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position

為了更好的駕馭背景圖片,CSS3新增了3個新的 background 相關屬性。

  1. background-clip
  2. background-origin
  3. background-size
  4. background-blend-mode

CSS3 中還新增了多背景漸變等等新特性。

background-image

為元素設定一個或多個背景影像。 background-image background-color 之上、 border 之下渲染。也就是一個同時設定了 background-color background-image 那麼 background-image 會覆蓋 background-color

background-image 的值是一個圖片或多個圖片(用 , 分隔)。

div {
    background-image:  url("a.jpg"), url("b.jpg");
}

linear-gradient()

建立一個表示兩種或多種顏色線性漸變的圖片。CSS 漸變沒有固定大小也沒有固定寬高比,它只等設定漸變角度、漸變顏色和漸變梯度。

linear-gradient 的語法是 [角度(角度或關鍵字)], 顏色 [梯度] ,它們用 , 分隔,角度可選預設時從上到下漸變。

顏色關鍵字是 to left to top to left top 等位置關鍵字。

div {
    background-image: 
    linear-gradient(90deg, rgba(255, 255, 255, .5), orange 70%, #000), 
    linear-gradient(red, orange 70%, #000);
}
強大的CSS:顏色、背景和剪下

repeating-linear-gradient()

一個由重複線性漸變組成的圖片。它的語法和 linear-gradient 類似。

div {
  background-image: repeating-linear-gradient(-45deg,
      transparent,
      transparent 25px,
      #000 25px,
      #000 50px);
}
強大的CSS:顏色、背景和剪下

radial-gradient()

建立一個徑向漸變(由原點(漸變中心)輻射開的顏色漸變)的圖片。

radial-gradient() 的語法是 邊緣輪廓的具體位置 形狀 漸變中心 後面是 顏色 , 分隔。

div {
    background: radial-gradient(circle closest-side at 50px 30px, yellow, red 5%, orange, #fff, #000);
}
強大的CSS:顏色、背景和剪下

其中 邊緣輪廓的具體位置 形狀 漸變中心 都是可選。

形狀值可以為 circle ellipse 預設 ellipse

漸變中心是 at 後的座標點,預設元素中心點。

邊緣輪廓的具體位置可以為如下關鍵字:

  1. closest-side  漸變中心距離容器最近的邊作為終止位置。
  2. closest-corner  漸變中心距離容器最近的角作為終止位置。
  3. farthest-side  漸變中心距離容器最遠的邊作為終止位置。
  4. farthest-corner  漸變中心距離容器最遠的角作為終止位置。

預設是 farthest-corner

div {
    position: relative;
    width: 262px; height: 262px;
    border-radius: 50%;
    background: linear-gradient(30deg, transparent 40%, rgba(42, 41, 40, .85) 40%) no-repeat 100% 0, linear-gradient(60deg, rgba(42, 41, 40, .85) 60%, transparent 60%) no-repeat 0 100%, repeating-radial-gradient(#2a2928, #2a2928 4px, #ada9a0 5px, #2a2928 6px);
    background-size: 50% 100%, 100% 50%, 100% 100%;
}
div:after {
    position: absolute;
    top: 50%; left: 50%;
    margin: -35px;
    border: solid 1px #d9a388;
    width: 68px; height: 68px;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #da5b33, inset 0 0 0 27px #da5b33;
    background: #b5ac9a;
    content: '';
}
強大的CSS:顏色、背景和剪下

repeating-radial-gradient()

建立一個從原點輻射的重複漸變組成的圖片 。它類似於 radial-gradient 並且採用相同的引數,但是它會在所有方向上重複顏色,以覆蓋其整個容器。

div{
  background: repeating-radial-gradient(ellipse farthest-corner, red, black 5%, blue 5%, green 10%);
}
強大的CSS:顏色、背景和剪下

conic-gradient()

建立一個錐形漸變的圖片。 conic 漸變類似於 radial 漸變,但是它的顏色位於圓的周圍。

強大的CSS:顏色、背景和剪下

它的語法是: [from 角度]? [at 位置]?, 顏色 角度...

div{
background: conic-gradient(from 0deg at 50px 100px, orange 0.2turn, #fff 0.09turn 0.3turn, orange 0.27turn 0.54turn);
border-radius: 50%;
}
強大的CSS:顏色、背景和剪下

background-repeat

定義背景影像的重複方式。背景影像可以沿著水平軸,垂直軸,兩個軸重複,或者根本不重複。

它有 6 個值:

  1. repeat-x  相當於  repeat no-repeat
  2. repeat-y  相當於  no-repeat repeat
  3. repeat  相當於  repeat repeat
  4. space  相當於  space space
  5. round  相當於  round round
  6. no-repeat  相當於  no-repeat no-repeat

space

影像會盡可能得重複, 但是不會裁剪. 第一個和最後一個影像會被固定在元素(element)的相應的邊上, 同時空白會均勻地分佈在影像之間.  background-position 屬性會被忽視, 除非只有一個影像能被無裁剪地顯示. 只在一種情況下裁剪會發生, 那就是影像太大了以至於沒有足夠的空間來完整顯示一個影像。

強大的CSS:顏色、背景和剪下

round

隨著允許的空間在尺寸上的增長, 被重複的影像將會伸展(沒有空隙), 直到有足夠的空間來新增一個影像. 當下一個影像被新增後, 所有的當前的影像會被壓縮來騰出空間. 例如, 一個影像原始大小是260px, 重複三次之後, 可能會被伸展到300px, 直到另一個影像被加進來. 這樣他們就可能被壓縮到225px.

強大的CSS:顏色、背景和剪下

效能

一般我們會用一個的背景小圖片不斷重複來達到一些效果,為了請求優化一般會把小圖片擷取到 1px * 1px 大小,但是這樣渲染次數太多,有時候會有明顯的卡頓,我們可以將尺寸擷取大一點這樣圖片大小沒大多少,但是渲染效能卻有明顯提升。

background-blend-mode

定義該元素的背景圖片,以及背景色如何混合。

它就像 PS 中的混合模式。可以做一些 正片疊底,濾色等效果。

它的語法為,單值或者雙值(用 , 分開)。

它的值有:

  1. normal
  2. multiply
  3. screen
  4. overlay
  5. darken
  6. lighten
  7. color-dodge
  8. color-burn
  9. hard-light
  10. soft-light
  11. difference
  12. exclusion
  13. hue
  14. saturation
  15. color
  16. luminosity

background-attachment

如果指定了 background-image  ,那麼 background-attachment 決定背景是在視口中固定的還是隨包含它的區塊滾動的。

它的值為:

  1. scroll  預設值,背景相對於元素本身固定, 而不是隨著它的內容滾動
  2. local  背景相對於元素的內容固定。如果一個元素擁有滾動機制,背景將會隨著元素的內容滾動
  3. fixed  背景相對於視口固定。即使一個元素擁有滾動機制,背景也不會隨著元素的內容滾動。

我們一般只使用 fixed 這個值,讓背景圖片不隨著滾動而滾動。

background-position

為每一個背景圖片設定初始位置。屬性被指定為一個或多個位置值,用逗號隔開。

預設位置是 padding-box 的左上角。

它的值可以是 left top 這些位置關鍵字,還可以是長度值和百分比。

div {
    background-position: 50% 10px, center, left bottom;
    /* 分別設定三張背景圖片的位置 */
}

background-origin

指定背景圖片 background-image 屬性的原點位置的背景相對區域。當使用  background-attachment fixed 時,該屬性將被忽略不起作用。

它的值可以是:

  1. padding-box  預設值 背景圖片的擺放以padding區域為參考
  2. border-box  背景圖片的擺放以border區域為參考
  3. content-box 背景圖片的擺放以content區域為參考

background-clip

設定元素的背景(背景圖片或顏色)是否延伸到邊框下面。

它的值可以是:

  1. border-box  預設值 背景延伸至邊框外沿(但是在邊框下層)。
  2. padding-box  背景延伸至內邊距外沿。不會繪製到邊框處。
  3. content-box  背景被裁剪至內容區外沿。
  4. text  背景被裁剪成文字的前景色。

background-size

設定背景圖片大小。圖片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同時縮放到元素的可用空間的尺寸。

對於多背景用 , 分隔。

它的值可以是長度值和百分比還有下面的關鍵字

  1. auto  以背景圖片的比例縮放背景圖片
  2. cover  縮放背景圖片以完全覆蓋背景區,可能背景圖片部分看不見。和 contain 值相反
  3. contain  縮放背景圖片以完全裝入背景區,可能背景區部分空白
強大的CSS:顏色、背景和剪下

background

一種簡寫屬性,用於一次性集中定義各種背景屬性。它可以簡寫的屬性有 background-clip background-color background-image background-origin background-position background-repeat background-size ,和 background-attachment

簡寫的方式有:

  • color
  • image repeat
  • box color
  • repeat position[ / size]? image
  • image position[ / size]? repeat attachment clip origin
  • color image position[ / size]? repeat attachment clip origin

clip-path

clip-path 用來剪下元素,代替了現在已經棄用的剪下 clip 屬性。它建立一個剪下區域,區域內的部分顯示,區域外的隱藏。

clip-path 的值可以為:

  1. none
  2. 連結資源,如 url(resources.svg#c1)
  3. 盒子值,一共有 7 個
    1. margin-box  使用 margin box 作為引用框
    2. border-box  使用 border box 作為引用框
    3. padding-box  使用 padding box 作為引用框
    4. content-box  使用 content box 作為引用框
    5. fill-box  利用物件邊界框作為引用框
    6. stroke-box  使用筆觸邊界框作為引用框
    7. view-box  使用最近的 SVG 視口作為引用框
  4. 形狀函式(相當於 SVG 中的形狀元素)
    1. inset()
    2. circle()
    3. polygon()
    4. path()
  5. 盒子和形狀結合值 clip-path: padding-box circle(50px at 0 100px);

clip-path 用的最多的值就屬 polygon 函式,它的引數由一堆 x y 座標點組成。

clip-path: polygon(50% 0%, 0% 100%, 100% 100%); 。是一個三角形。它可以接受無限個引數,每個引數都是 x y 座標,最終顯示的形狀就是這些座標連線成的形狀。

clip-path 也可以使用 transition 屬性讓它有動畫效果,不過需要變動前後的座標點數量必須相同。

這裡推薦一下我的前端學習交流扣qun:731771211 ,裡面都是學習前端的,如果你想製作酷炫的網頁,想學習程式設計。自己整理了一份2019最全面前端學習資料,從最基礎的HTML+CSS+JS【炫酷特效,遊戲,外掛封裝,設計模式】到移動端HTML5的專案實戰的學習資料都有整理,送給每一位前端小夥伴,每天分享技術


來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69901074/viewspace-2644856/,如需轉載,請註明出處,否則將追究法律責任。

相關文章