自我介紹

大家好，我是前端picker，歡迎關注我的公眾號[櫻舞話前端]，(文章最下面有二維碼，掃一掃進入前端新世界)

關注專欄 學透CSS,帶你走進CSS的深處！！！專欄暫未收費，早關注早白嫖！

前言

俗話說一圖勝千言，網頁中一張好看的圖片，配上精美的文字，定能吸引眼球，

background-image-設定元素的背景圖片

定義

將圖形（例如 PNG、SVG、JPG、GIF、WEBP）或漸變應用于元素的背景，

有兩種不同型別的影像可以包含在 CSS 中：常規影像和漸變，

屬性值

url(‘URL’)

影像的URL

background-image: url(./bk.jpg);

none

默認值，無影像

漸變

linear-gradient() 線性漸變

默認是從上往下創建一個線性漸變的影像

background-image: linear-gradient(#55efc4,#a29bfe);

語法

background-image:linear-gradient(角度/to，顏色，顏色  開始漸變的位置, ......)；

background-image:linear-gradient(),linear-gradient()...;

根據語法，合理猜測，從上往下，默認是180deg或者 to bottom,
瀏覽器默認會把第一個顏色的位置設定為0%，把最后一個顏色的位置設定為100%

舉例1 deg

background-image: linear-gradient(45deg,#55efc4,#a29bfe);

舉例2 to語法

background-image: linear-gradient(to left top,#55efc4,#a29bfe);

舉例3 多顏色以及位置

linear-gradient(#55efc4,#a29bfe 30%,#fd79a8 50% )

接收多個linear-gradient

錯誤例子

background-image: linear-gradient(45deg,#55efc4,#a29bfe,linear-gradient( #d63031,#e84393);

第二個漸變并沒有出現，這是因為第一個漸變是從0-100%的，占滿了整個元素，所以第二個沒有出現，

正確示例，使用transparent

使用transparent *%；的方式來將部分空間來透明化，從而顯示其他漸變，

background-image: linear-gradient(45deg,#55efc4,#a29bfe,transparent 50%),linear-gradient( #d63031,#e84393);

radial-gradient() 徑向漸變

徑向漸變創建 “影像”， 從中心往四周,發散的形狀是圓形或者橢圓形

語法

background-image: radial-gradient([形狀 大小 at(位置)],開始顏色，......,終止顏色);

形狀

ellipse (默認): 橢圓形的徑向漸變，
background-image: radial-gradient( #48dbfb,#ee5253);

circle ：圓形的徑向漸變
background-image: radial-gradient( circle,#48dbfb,#ee5253);

size

farthest-corner (默認) : 指定徑向漸變的半徑長度為從圓心到離圓心最遠的角

closest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊
background-image: radial-gradient(closest-side ,#48dbfb,#ee5253);

closest-corner ： 指定徑向漸變的半徑長度為從圓心到離圓心最近的角

background-image: radial-gradient(closest-corner at 20%,#48dbfb,#ee5253);

farthest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊
background-image: radial-gradient(farthest-side at 20%,#48dbfb,#ee5253);

at（位置）

at center（默認）：中間為徑向漸變圓心的縱坐標值，

background-image: radial-gradient(at center,#48dbfb,#ee5253);

at top：頂部為徑向漸變圓心的縱坐標值，
background-image: radial-gradient(at top,#48dbfb,#ee5253);

at bottom：底部為徑向漸變圓心的縱坐標值，
background-image: radial-gradient(at top,#48dbfb,#ee5253);

at 值：值所在位置為徑向漸變圓心的橫坐標值，

background-image: radial-gradient(at 1590px,#48dbfb,#ee5253);

conic-gradient 圓錐漸變

圓錐漸變類似于徑向漸變，兩者都是圓形并使用元素的中心作為色標的源點，然而，在徑向漸變的色標從圓心出現的地方，圓錐漸變將它們放置在圓周圍，

制作一個 位于[某個點]的 圓錐梯度，該 漸變以 某個角度的[一種顏色] 開始， 并 以 [某個角度] 的[另一種顏色]結束

大概就是下面這么個效果，從

語法

conic-gradient(
  [ from <angle> ]? [ at <position> ]?,
  <angular-color-stop-list>
)

舉例1 只有漸變色

background-image: conic-gradient(#2ecc71, #e52e71);

舉例2 at語法 規定中心點位置

background-image: conic-gradient(at 30% 40%, #2ecc71, #e52e71);

舉例3 from語法，規定圓錐初始位置

    background-image: conic-gradient(from 45deg, #2ecc71, #e52e71);

舉例4 from at 同時使用

background-image: conic-gradient(from 45deg at 30% center, #2ecc71, #e52e71);

舉例5 顏色后面+百分比

background-image: conic-gradient(#2ecc71 70%, #3498db, #e52e71);

舉例6 顏色后面+角度/turn

background-image: conic-gradient(#2ecc71 45deg, #e52e71 0.5turn );

repeating-linear-gradient()

創建重復的線性漸變 “影像”，
這個屬性與liner-gradlient的引數用法一致，
區別就是
只有當首尾兩顏色位置不在0%或100%時，會產生重復漸變
background-image: repeating-linear-gradient( #48dbfb,#ee5253);
這種方式就無法產生漸變

background-image: repeating-linear-gradient( #48dbfb,#ee5253 10%);

repeating-radial-gradient()

創建重復的徑向漸變 “影像”
這個屬性與radial-gradlient的引數用法一致，
區別就是
只有當初終兩顏色位置不在0%或100%時，會產生重復漸變
background-image: repeating-radial-gradient( #48dbfb,#ee5253);
這種方式就無法產生漸變

background-image: repeating-radial-gradient( #48dbfb,#ee5253 );

前言

上文我們介紹了，背景圖片以及漸變，但是僅僅學會那點，只是背景圖片的九牛一毛，本文要介紹的backdround-* 大家族，也是背景圖片千變萬化的基石，

background-repeat ：如何平鋪背景圖片，

語法

單值語法

background-repeat：屬性值；

repeat：在兩個方向上平鋪影像，這是默認值，

background-image: url('./juejin.png');
background-repeat: repeat;

repeat-x: 水平平鋪影像

background-image: url('./juejin.png');
background-repeat: repeat-x;

repeat-y: 垂直平鋪影像

background-image: url('./juejin.png');
background-repeat: repeat-y;

no-repeat: 不要平鋪，只顯示一次影像

background-image: url('./juejin.png');
background-repeat: no-repeat;

space：在兩個方向上平鋪影像，除非單個影像太大而無法容納，否則不裁剪影像，如果可以容納多個影像，請將它們隔開，使影像始終接觸邊緣，

仔細看，repeat的時候，最后一個影像是沒有顯示全的，使用space會自動增加影像的間距，之前的最后一影像顯示全了，

round：在兩個方向上平鋪影像，除非單個影像太大而無法容納，否則切勿裁剪影像，如果多個影像可以容納剩余空間，請將它們壓扁或拉伸以填充空間，如果剩下的影像寬度小于一半，則拉伸，如果大于，則拉伸，

先看下正常的情況，右邊和下邊都顯示不全，右邊的明顯小于圖片的一般，下邊明顯大于圖片一半

 width: 190px;
 height: 110px;
background-image: url('./juejin.png');
background-repeat: repeat;

下面再來看一下使用round的效果
明顯可以看見最右側的一列沒有了，下邊的一行顯示的全，

兩值語法

兩個值的語法：

/* background-repeat: horizontal vertical */
   background-repeat: repeat space;
   background-repeat: repeat repeat;
   background-repeat: round space;
}

background-attachment ：背景圖片是否固定或隨著滾動移動，

屬性值

scroll

背景影像相對于元素固定，也就是說當元素內容滾動時背景影像不會跟著滾動，因為背景影像總是要跟著元素本身，但會隨元素的祖先元素或表單一起滾動，

fixed

背景影像相對于表單固定

local

背景影像相對于元素內容固定，也就是說當元素隨元素滾動時背景影像也會跟著滾動

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-dLAMjKXs-1634606807216)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/945f66ff139d41fb8a9fc326f3789a28~tplv-k3u1fbpfcp-watermark.image)]

background-position ：背景圖片的位置，

定義

在其容器內移動背景影像（或漸變），

語法

兩個值

兩個值時，第一個值是水平偏移量，第二個值是垂直偏移量，

長度值（例如100px 5px）

百分比（例如50% 5%）

關鍵字（例如top right）

單值

該值是水平偏移量，瀏覽器將垂直偏移設定為center

三/四個值

語法如下：

background-position: top/bottom/right/bottom 100px top/bottom/right/bottom;// 第四個默認為0；
background-position: top/bottom/right/bottom 100px top/bottom/right/bottom 20px;

注意不能同時出現 bottom和top,或者 right/bottom,因為這是不符合常理的，

background-size ：設定背景圖片的大小，

前言

個人認為，這是CSS屬性中最復雜屬性之一，因為他支持的語法特別多，但是這個語法也是特別簡單的，比較容易記的，

語法

特定值

auto

默認值，瀏覽器根據圖片的實際大小和縱橫比自動計算大小

// 背景圖片的大小是100*123
  width: 200px;
  height: 200px;
  background-image: url("./bk.jpg");
  background-repeat: no-repeat;
  background-size: auto;

cover

確保影像始終覆寫整個容器，即使它必須拉伸影像或切掉一個邊緣，

// 背景圖片的大小是100*123
  width: 200px;
  height: 200px;
  background-image: url("./bk.jpg");
  background-repeat: no-repeat;
  background-size: cover;

contain

瀏覽器會保持圖片的寬高比，然后拉伸到合適的大小，最終保證寬或者高等于容器，并且是始終顯示整個影像，

// 背景圖片的大小是100*123
  width: 200px;
  height: 200px;
  background-image: url("./bk.jpg");
  background-repeat: no-repeat;
  background-size: contain;

這里因為容器的寬高一致，圖片的高度是大于寬度的，所以瀏覽器優先拉伸高度，導致寬度有空白

單值

只提供一個值（例如background-size: 400px），它會計算寬度，而高度設定為auto，你可以使用任何你喜歡的CSS大小單位，包括像素、百分比、em、視口單位等，

雙值

如果提供兩個值，第一個設定背景影像的寬度，第二個設定高度，與單值語法一樣，可以使用任何您喜歡的度量單位，

多張圖片尺寸

語法

background-image: 圖片1,圖片2，......;
background-size: 圖片1尺寸, 圖片2尺寸.....;

 width: 200px;
      height: 200px;

      background-image: url("./bk.jpg"),url('./juejin.png');
      background-repeat: no-repeat;
      background-size: 30px 30px, 60px 60px;

background-orgin： 背景圖片的起點位置

前言

這里標題中寫了背景圖片的起點位置，是有特殊意義的，因為這個屬性對背景顏色沒有效果

  border: dashed 5px rgba(20,81,154,0.5);
  width: 200px;
  height: 200px;
  background-origin: content-box;
  background-color: aqua;
  background-size: 250px 250px; */
  padding: 20px;

這里設定起點位置是content-box,但是并沒有生效

屬性值

border-box

從border作為起點
仔細看圖，你會發現，圖片是從左上角內容開始的，整個圖片都在border-box下，

padding-box

從邊框作為起點
仔細看圖，你會發現，圖片是從左上角padding開始的，并且右邊和下邊還是在border區域的，

content-box

從content作為起點
仔細看圖，你會發現，圖片是從左上角內容開始的，并且右邊和下邊還是在border區域的，

background-clip 對圖片和背景色的裁剪

前言

這個屬性和上面的background-origin 乍一看特別像，屬性值都一模一樣，
不過從標題中我們最先確定的是clip會對背景顏色生效，

屬性值

border-box

整個元素

padding-box

content-box

從內容區域開始裁剪

 background-clip: content-box;
 background-color: aqua;
 background-image: url();

前言

在前面，我們介紹了背景圖片，以及背景圖片的裁剪、位置、尺寸、起始位置等等屬性，相信通過前兩章大概可以窺得CSS天機了吧，

mask-image

從名稱上面 面具-圖片，大概就知道這個屬性是干嘛的，屬性值是啥了，
用于設定元素上遮罩層的影像，可以放在所有元素上，甚至包括svg，

不知道有沒有用過PS，在PS中有一個叫做蒙版的東西，蒙版是一種灰度影像，用黑色繪制的區域將隱藏，用白色繪制的區域將可見，而用灰度繪制的區域將以不同級別的透明度出現，

mask-image和這個蒙版差不多，不同的是，mask-image是不透明的地方顯示，透明的地方不顯示，就像是你拿一張黑紙放在電腦螢屏上，你只能看到黑紙所在區域的電腦畫面，其他的地方看不到，解釋道這里，相信應該明白了，如果不明白就通過下面的例子來理解吧，

兼容性

目前來看兼容性還是不錯的！

相關屬性

mask-clip

mask-composite

mask-image

mask-mode

mask-origin

mask-position

mask-repeat

mask-size

mask-type

上面這幾個屬性呢background-image的相關屬性用法差不多，所以某些屬性在本文中就不贅述了，想學習的童鞋，請移步主頁查看，

mask-image

屬性值

none;

沒有圖片，設定了這個屬性，其他的mask-* 屬性自然沒有用處了

url(jpg/png/svg);

這里我們看一下svg的效果
首先再阿里iconfont上復制一個svg 保存為mk.svg

然后來使用它：

#masked {
  width: 200px;
  height: 200px;
  background-color: #8cffa0;
  -webkit-mask-image: url(./mk.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-origin:content-box;
  border: 10px solid #000;
}

<div id="masked"></div>

這里我們開始來分析：

首先：大家看到的淡黃色的邊框是滑鼠審查元素看到的，真正的是下面這樣，并沒有邊框的

首先我們定義了背景顏色，淡綠色，mask是上面的svg，mask的起始位置是內容區域，最后定義了一個邊框，最后從效果圖中我們可以得出一下結論

1. mask-image 是對整個元素生效的（包括border）

2. mask-image 是mask透明背景顯示，mask不透明背景看不見

3. 我們是無法看到mask本身的內容的，只能看到背景的內容，

漸變

-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent 50%);

mask-image: linear-gradient(rgba(0, 0, 0, 1.0), transparent);

image(url(mask.png), skyblue);

在最新版的谷歌和火狐中均無法識別，

有趣的例子-聚光燈

效果如下：

實作邏輯：

首先是一張作為背景圖片的人物照

一個黑色的圖片作為mask

使用影片來控制黑色mask的位置，就可以實作

    <style>
      @keyframes mask{
        0% {-webkit-mask-position:0px 60px;}
        15% { -webkit-mask-position:55px 50px;}
        30% {-webkit-mask-position:117px 0px;}
        45% { -webkit-mask-position:110px 110px; -webkit-mask-size:85px 85px;}
        60% { -webkit-mask-position: 173px 8px;-webkit-mask-size: 86px 85px;}
        75% { -webkit-mask-position: 193px 110px;-webkit-mask-size: 80px 80px;}
        90% {-webkit-mask-position: 270px 80px;-webkit-mask-size: 90px 65px;}
        100% {-webkit-mask-size:1000%;}
     }
      .mask {
        width: 300px;
        height: 200px;
        background: url(./哆啦a夢.png);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-image: url("./black.png");
        -webkit-mask-size:60px 70px;
        animation: mask 5s linear infinite forwards;
      }
    </style>
  </head>
  <body>
    <div class="mask"></div>
  </body>

附上照片，可以自己本地跑跑試試，

總結

通過幾個小例子，相信你對mask-image,屬性應該是很熟悉了，對于文章中提到的一些屬性，文章雖然沒有講解，但是也是很重要的，要學起來！！！可以去看我之前background-image屬性的文章，大致是一樣的，本來這篇文章是要作為圖片的最后一篇的，奈何mask-image很復雜，所以剩余沒介紹的圖片屬性，只能放在下一篇了，

前言

前有background-image 為背景增光增彩，后有mask-image 給背景增加可玩性，今天我們來聊聊border-image，看看他是如何發光發熱的！Go!Go!Go!

border-image

首先這個屬性是下面個屬性的縮寫，

border-image-source

border-image-slice

border-image-width

border-image-outset

border-image-repeat

原理

對于本人來說，這個屬性比其他屬性來講是比較難的,所以先介紹背后的原理，

首先掏出一張大家都在用的圖片，是不是瞬間感覺很熟悉，

為什么這張圖這么受大家的歡迎呢，我覺得這張圖是一個完美的九宮格，沒錯，九宮格就是原理，
這里我們假設border-image（或者說是border-image-slice）屬性三等分，把圖片分成一個九宮格，這張圖是8181尺寸的，所以正好是每個菱形占據一個角，尺寸是2727，

同時也會把瀏覽器元素分成九塊,但是并不是平均分的，比如，左上角大小就和borderimage的左上角大小一致，但是上邊中間的大小是剩余的空間大小，這里就引出了第二個屬性，border-image-repeat會決定borderimage中間格子在元素上如何顯示，相信看到這里大家對于border-image的原理有大概的了解了，

下面我們介紹各個屬性

border-image-source

border-image的背景圖使用url()呼叫，圖片可以是相對路徑或是絕對路徑，也可以不使用圖片，即border-image:none;
這里有個點要注意：如果存在border-image屬性并且圖片不是none的話，border-style 會失效，

舉例

  width: 200px;
  height: 200px;
  border: 10px solid #000;
  padding: 20px;
  border-image: url('./../juejin.png') ;

通過圖片我們會發現：

1. 我們給邊框設定的黑色并沒有生效，

2. border-image的寬度和border的寬度保持一致，

3. 如果不設定border的寬度，border-image也就沒有寬度，即使你設定了border-image-width:也是沒有作用的，（border-image-width下面會介紹，莫急！）

border-image-slice

規定圖片剪裁位置

1. 沒有單位，專指像素，默認單位是像素(px)了，例如：border-image:urlurl('./../juejin.png') 30 repeat;這里的30就是30像素
2. 支持百分比值，百分比值大小事相對于邊框圖片而言，假設邊框圖片大小為400px*300px，則20%的實際效果就是剪裁了圖片的60px 80px 60px 80px的四邊大小，
3. 可以接收單值，兩個值

下面是個人的理解方式，可能說法不太正確

我們可以想象有四根線，top right bottom left,這四根線都有一個值：

top距離boder上面的距離，right距離border右邊的距離

bottom距離border下面的距離，left距離border左邊的距離

然后的根據這個值裁剪出來的內容一次對應到元素上

一個值；

border-image-slice: 30%;

一個值：四條線的距離都是一樣的，

兩個值

border-image-slice: 10% 30%;

top和bottom是10%

left和right是30%

這里舉兩個極端的例子
border-image-slice: 30% 100%;

border-image-slice: 100% 100%;

效果圖是這樣子的，這里先不給解釋為什么是這樣子的效果，等大家看完四個值的例子，這里就很簡單了，

三個值

border-image-slice: 30 30% 45;

top是30

left和right是30%

top是45

四個值

width: 200px;
height: 200px;
border: 10px solid #000;
padding: 20px;
border-image: url(./border.png);
border-image-slice: 10 19 1 12;

效果

下面來決議一下這張圖是怎么形成的，
首先我們先來按照border-image-slice: 10 19 1 12;將背景圖分解成9宮格，

然后再來分解效果圖，同樣也是9宮格，

通過兩圖的對比我們來說明是如何對應的，

首先是格子1，border-image裁剪出來的是一個三角形，然后再效果圖上是不是也是一個三角形！

然后格子2，border-image裁剪出來的是一個
，效果圖上是這樣子的，單獨拿出來看是不是一樣，有人說效果圖，明顯拉伸了，沒錯這就得說到另一個屬性了 border-image-repeat 屬性了！它默認就是拉伸，
，

最明顯的就是格子7 ，border-image沒有裁剪出來任何影像，效果圖上也沒有任何東西呈現，

fill

親測這個值再最新版的火狐和谷歌瀏覽器無法識別！！！

border-image-repeat

這個是和background-repeat基本差不多，但是它只有三個值可以用，
重復（repeat）、拉伸（stretch） 鋪滿（round）

stretch

默認值

repeat

看一下效果，四個角的黃色都缺了一點，親測在谷歌和火狐瀏覽器下都是這樣子的效果，這是為啥呢？因為repeat是從中間往兩端重復的，

round

如圖所示瀏覽器，會自動計算，讓影像完整的顯示

但是，在谷歌瀏覽器還是有缺的！！！！！！

border-image-outset

指定在邊框外部繪制 區域 的量，包括上下部和左右部分，如果第四個值被省略，它和第二個是相同的，如果也省略了第三個，它和第一個是相同的，如果也省略了第二個，它和第一個是相同的，不允許border-im-outset擁有負值，這里就不贅述了，

這里只區分兩種情況

單純的數字

如果是單純的數字的話，實際上的距離是數字倍的border-width

border: 10px solid #000;
border-image-outset: 10 30;

*px

border-image-outset: 10px 30px;

這兩個可以混在一起寫！！！

border-image-width

當指定 一個 值時，它將作用到 四個方向 ；
當指定 兩個 值時，它將分別作用到 top/bottom 和 left/right方向 ；
當指定 三個 值時，它將分別作用到 上方、left/right方向、和下方；
當指定 四個 值時，它將分別作用到 上方、右方、下方和左方，

默認值是border-width的寬度

屬性值

number 表示相應的border-width 的倍數

 border: 10px solid #000;
 border-image-width: 3 4;

% 邊界影像區域的大小：橫向偏移的寬度的面積，垂直偏移的高度的面積

border-image-width: 30% 10%;
81是圖片的尺寸，

*px

border-image-width: 50px 5px;

auto 如果指定了，寬度是相應的image slice的內在寬度或高度

border-image-slice: 27;
border-image-width: 3 4;

總結

通過這篇文章的學習，相信圖片問題都可以學會了！