CSS背景漸變

衛辰9發表於2019-04-09
CSS

第一次接觸背景漸變的時候其實沒什麼感覺，但自從看了《CSS揭祕》後發現背景漸變可以有很多種玩法，可以替代一部分圖片實現的內容，效果非常棒

線性漸變

css背景漸變基本語法格式：

background: linear-gradient( [ angle | to side-or-corner , ] ? color-stop [ , color-stop]+ )

第一個引數是代表漸變的角度方向，可以是角度值或者方向順序

預設角度為180deg，代表漸變方向是垂直向下的，90度是水平向右，對應的方向順序也可寫成to bottom、to right

.box {
  background: linear-gradient(#0f0, #00f); /* to bottom */
  background: linear-gradient(90deg, #0f0, #00f); /* to right */
}
複製程式碼
CSS背景漸變 CSS背景漸變

第二個及之後的引數是顏色值與其起止位置

還是上面的例子，只指定顏色值，至少要指定兩種顏色，預設將平均分配，每個色值各佔比例相同。可以使用數值或者百分比調整漸變的長度，推薦使用百分比更加靈活。

.box {
  background: linear-gradient(90deg, #0f0 50%, #00f 80%, #f00 100%);
}
複製程式碼
CSS背景漸變

在一個位置的分界點設定不同的色值，可以做出條紋的效果

.box {
  background: linear-gradient(
    #0f0 25%, #00f 25%,
    #00f 50%, #f00 50%,
    #f00 75%, #ff0 75%);
}
複製程式碼
CSS背景漸變

徑向漸變

徑向漸變基本語法格式類似：

background: radial-gradient( [ bg-position || angle, ] ? [ shape || size, ] ? color-stop, color-stop [ , color-stop]* )

第一個引數是代表漸變的位置，可以是方向的含義，也可以是確切的數值，預設在中心位置

.box {
  background: radial-gradient(#0f0, #f00);
  background: -webkit-radial-gradient(#0f0, #f00);
}
複製程式碼
CSS背景漸變

設定漸變中心位置，使漸變中心在框的左上方

.box {
  background: radial-gradient(
    top left,
    #0f0, #f00); /* 等價於 background: radial-gradient(0 0, #0f0, #f00); */
  background: -webkit-radial-gradient(
    top left,
    #0f0, #f00);
}
複製程式碼
CSS背景漸變

第二個引數是漸變的形狀和大小，形狀可以是圓形或者橢圓，大小有以下幾個值

  • closest-side 近邊
  • closest-corner 近角
  • farthest-side 遠邊
  • farthest-corner 遠角
  • contain 背景影象完全覆蓋背景區域
  • cover 背景影象完全適應內容區域

一般來說的大小排序為，近邊<近角<遠邊<遠角，這是由於圓心到邊的垂直距離要比點到角的距離更近，contain、cover和background-size中的contain、cover屬性類似

.box {
  background: radial-gradient(
    50px 50px,
    ellipse closest-side,
    #0f0, #f00); /* 近邊 */
  background: -webkit-radial-gradient(
    50px 50px,
    ellipse closest-side,
    #0f0, #f00);
}
複製程式碼
CSS背景漸變 
.box {
  background: radial-gradient(
    50px 50px,
    ellipse farthest-corner,
    #0f0, #f00); /* 遠角 */
  background: -webkit-radial-gradient(
    50px 50px,
    ellipse farthest-corner,
    #0f0, #f00);
}
複製程式碼
CSS背景漸變

第三個及之後的引數是顏色值與其起止位置，與線性漸變一致

.box {
  background: radial-gradient(
    #0f0 15%, #f00 15%,
    #f00 30%, #ff0 30%,
    #ff0 45%, #0ff 45%,
    #0ff 60%, #00f 60%);
  background: -webkit-radial-gradient(
    #0f0 15%, #f00 15%,
    #f00 30%, #ff0 30%,
    #ff0 45%, #0ff 45%,
    #0ff 60%, #00f 60%);
}
複製程式碼

一個簡單的靶圖

CSS背景漸變

一些例子

結合background-size，背景漸變可以玩出很多花樣，下面是一個桌布條紋背景圖

CSS背景漸變 
body {
  background:
    linear-gradient(90deg, rgba(0, 0, 255, .6) 50%, transparent 50%),
    linear-gradient(rgba(0, 0, 255, .6) 50%, transparent 50%), white;
  background-size: 50px 50px;
}
複製程式碼

結合background-position，可以移動漸變的位置，下面是一個銅板的平鋪背景

CSS背景漸變 
body {
  background:
    linear-gradient(45deg, #fff 15%, transparent 15%) 35px 65px,
    linear-gradient(45deg, transparent 85%, #fff 85%) -35px 35px,
    radial-gradient(transparent 50%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0.4) 65%, #fff 65%),
    #ffb521;
  background-size: 100px 100px;
}
複製程式碼

下面是一個星空背景圖

CSS背景漸變 
body {
  background:
    radial-gradient(white, rgba(255, 255, 255, .3) 2px, transparent 40px),
    radial-gradient(white, rgba(255, 255, 255, .2) 1px, transparent 30px),
    radial-gradient(white, rgba(255, 255, 255, .3) 2px, transparent 50px),
    radial-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, .1) 2px, transparent 30px),
    black;
  background-size: 400px 400px, 230px 230px, 310px 310px, 150px 150px;
}
複製程式碼

相關文章