CSS3 的一對孿生兄弟之 background & mask

時間  2019-11-17
標籤 css3 css 一對 孿生兄弟 background mask 欄目 CSS 简体版
原文   原文鏈接

前言css

不少人在作前端開發的時候基本都用過 background 屬性，可是 mask 屬性卻不多使用，甚至有些許陌生。可是實際上 mask 與 background 同樣簡單方便，甚至在某些地方比 background 更有優點！今天咱們就來深度學習一下 background & mask！html

再談盒模型

可能有人會問爲啥這裏又提起盒模型的概念？實際上不少老師在講述盒模型的時候，重心都放在了 margin、padding 和 border 上。而咱們今天再談的盒模型與這些無關。前端

既然叫盒模型，任何盒子都應該有一個地面和一個蓋子，就如上圖所示同樣。咱們 div 中的內容放在盒子裏面，天然也就在盒子底面的上面，而這裏的底面就是咱們今天要說的 background，背景。說到這裏我想你們也應該意識到，這裏的蓋子就是咱們要說的 mask，遮罩。git

經常使用的幾個基本屬性

圖像是由 rgb 三個通道以及第四個通道——alpha 通道，來繪製的。github

mask 的功能就是使用透明的圖片或漸變遮罩元素的背景。因而，mask 與背景 background 很是相似。這就是爲何說 background 和 mask 是一對孿生兄弟！web

值得一提：mask-mode 僅 Firefox 瀏覽器支持，Chrome 瀏覽器是基於 alpha 遮罩。遮罩元素的alpha值爲0的時候會徹底覆蓋下面的元素，爲1的時候會徹底顯示下面的內容。這裏咱們以 Chrome 瀏覽器做爲咱們的開發環境，因此 mask 在這裏僅使用 alpha 遮罩。在這裏我也不會討論 mask-mode 屬性，若有需求請自行查閱資料！瀏覽器

共性

先舉個栗子：bash

如今有結構以下：app

<div class="wrapper">
  <div class="container">
    我愛你！我愛你！我愛你！我愛你！我愛你！我愛你！我愛你！我愛你！我愛你！
  </div>
</div>
複製代碼

樣式以下：wordpress

.container {
  width: 250px;
  height: 250px;
  font-size: 2rem;
  overflow: hidden;
}
複製代碼

  1. background-image & mask-image

    • none（默認值）

      啥都沒有

    • gradient

      添加漸變色！

      咱們給以前的結構加個漸變背景色：

      background-image: -webkit-gradient(
  linear,
  left top,
  right bottom,
  from(rgb(255, 192, 159)),
  to(rgb(255, 238, 147))
);
複製代碼

      咱們再加一個遮罩 maks，這裏咱們用了一張 png 圖片，以下：

      -webkit-mask-image: url(../images/example.png);
複製代碼

      這裏咱們不用漸變色是有緣由的，由於 Chrome 瀏覽器所支持的 mask-mood 只基於 alpha 通道，因此漸變自己的顏色並不會做用於樣式上，只有 rgba 中的第四通道值是有效的。並且顯示出來的只有不一樣透明程度的白色樣式，具體以下：

      -webkit-mask-image: -webkit-gradient(
  linear,
  left bottom,
  right top,
  from(rgba(221, 80, 67, 1)),
  to(rgba(0, 0, 0, 0))
);
複製代碼

      遮罩元素的 alpha 值爲 0 的時候會徹底覆蓋下面的元素，爲 1 的時候會徹底顯示下面的內容。這也是爲啥咱們選擇 png 圖片的緣由。

  2. background-size & mask-size

    設置背景或者遮罩圖片的大小。

    這裏咱們先將背景換爲一張圖片：

    分辨率 3937×5906

    .container {
  width: 250px;
  height: 250px;
  font-size: 2rem;
  overflow: hidden;
  background-image: url(../images/man.jpg);
}
複製代碼

    這時候的樣式以下：

    背景圖片之因此只顯示了左上角的一小部分是由於背景圖片的分辨率太大了，而咱們的盒子只是 250px×250px 的大小，默認背景圖片的左上角與盒子的左上角是一致的，因此只顯示了左上角一小部分。

    這裏咱們就能夠運用 background-size 屬性來進行調整了：

    background-size: length|percentage（以父元素的百分比來設置背景圖像的寬度和高度）|cover|contain;
複製代碼

    這裏着重討論 cover|contain 這兩個值：

    屬性值 描述
    cover 把背景圖像擴展至足夠大，以使背景圖像徹底覆蓋背景區域。背景圖像的某些部分也許沒法顯示在背景定位區域中。
    contain 把圖像圖像擴展至最大尺寸，以使其寬度和高度徹底適應內容區域。

    咱們這裏爲了讓背景圖片徹底顯示，因此旋轉 contain。

    background-size: contain;
複製代碼

    咱們也爲 mask 添加 mask-size，這裏咱們使用 cover。

    -webkit-mask-size: cover;
複製代碼

    因爲咱們 mask 的圖片長寬比與盒子長寬比同樣，因此咱們只能看到一個遮罩圖片。

  3. background-repeat & mask-repeat

    這個字面意思就是：背景圖片或者遮罩是否重複出現。

    對於這一屬性只有兩個值：repeat（重複（默認值））/no-repeat（不重複（僅顯示一次））

    這裏咱們添加以下兩個屬性：

    background-repeat: no-repeat;
-webkit-mask-repeat: no-repeat;
複製代碼

    能夠看到背景只顯示了一次而並未重複出現。因爲咱們的遮罩自己就只能看到一次，因此在這裏設置 no-repeat 並無什麼實際效果。

  4. background-position & mask-position

    設置背景圖片或者遮罩圖片的位置。

    值 描述
    x y
    x,y=top|left|right|bottom|center    		 若是您僅規定了一個關鍵詞，那麼第二個值將是"center"。默認值：0% 0%。
    能夠接偏移量，如：background-position: right 40px bottom 20px;
    x% y% 第一個值是水平位置，第二個值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。若是您僅規定了一個值，另外一個值將是 50%。
    xpos ypos 第一個值是水平位置，第二個值是垂直位置。左上角是 0 0。單位是像素 (0px 0px) 或任何其餘的 CSS 單位。若是您僅規定了一個值，另外一個值將是 50%。您能夠混合使用 % 和 position 值。

    這裏有一點須要注意：

    <position>值對應的容器座標位置實際上有一個公式的：

    positionX = (容器的寬度-圖片的寬度) * percentX;
positionY = (容器的高度-圖片的高度) * percentY;
複製代碼

    當background-position:100% 100%時候，實際定位值就是容器尺寸和圖片尺寸的差別，因而就有了右下角定位效果。

    瞭解更多CSS 值簡介理解 background 百分比定位

    這裏咱們讓背景圖片居中，且改變 mask 的大小爲容器寬度的一半，讓其也居中顯示。

    background-position: center;
-webkit-mask-size: 50%;
-webkit-mask-position: center;
複製代碼

    能夠看到背景和縮小後的遮罩都已經居中顯示了。

  5. background-origin & mask-origin

    規定 background-position 和 mask-position 屬性相對於什麼位置來定位。

    background-origin: padding-box（默認值）|border-box|content-box;
-webkit-mask-origin: padding-box|border-box（默認值）|content-box|margin-box;
複製代碼
    值 描述
    padding-box 背景圖像相對於內邊距框來定位。
    border-box 背景圖像相對於邊框盒來定位。
    content-box 背景圖像相對於內容框來定位。
    margin-box 背景圖像相對於邊距框來定位。

    咱們從新寫一下盒子樣式：

    .container {
  width: 250px;
  height: 250px;
  font-size: 2rem;
  overflow: hidden;
  border: 10px solid rgba(255, 0, 0, 0.5);
  background-image: url(../images/man.jpg);
  background-repeat: no-repeat;
  background-size: 100px;
}
複製代碼

    關於上述樣式就再也不說明了，這時候我添加以下樣式：

    background-origin: border-box;
複製代碼

    能夠看到背景圖片起點由 padding-box 的左上角變爲了 border-box 的左上角。

    如今加上 mask：

    -webkit-mask-image: url(../images/example.png);
-webkit-mask-size: 50px;
複製代碼

    能夠看出 mask 的默認值是 border-box。

    咱們將其改成 padding-box：

    -webkit-mask-origin: padding-box;
複製代碼

    能夠看到遮罩是由 padding-box 的左上角爲原點開始平鋪的。

  6. background-clip & mask-clip

    設置元素的背景或遮罩背景的繪製區域。

    background-clip: border-box（默認值）|padding-box|content-box|text;
-webkit-mask-clip: border-box（默認值）|padding-box|content-box|margin-box;
複製代碼

    一樣咱們重寫一下樣式：

    .container {
  width: 250px;
  height: 250px;
  font-size: 2rem;
  overflow: hidden;
  border: 10px solid rgba(255, 0, 0, 0.3);
  background-image: url(../images/man.jpg);
  background-size: 100px;
  background-origin: border-box;
  background-position: 0 0;
}
複製代碼

    能夠看到，在默認狀況下，背景圖片在 border 範圍以內都進行了平鋪。

    當咱們設置：

    background-clip: padding-box;
複製代碼

    能夠看到平鋪範圍被限定在了 padding 範圍以內了。

    值得一提：background-clip：text

    <div class="container">Love You!</div>
複製代碼
    .container {
  font-size: 5rem;
  font-weight: bolder;
  color: transparent;
  background-image: url(../images/scene.jpg);
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
}
複製代碼

    這裏用的背景：

    ages/scene.jpg)

    Love You! + scene.jpg = 以下：

  7. background-attachment & mask-attachment

    設置背景圖像或者遮罩圖像的位置是固定在 viewport 內，仍是與其容器一塊兒滾動。

    background-attachment: scroll（默認值）|fixed|local;
mask-attachment: scroll（默認值）|fixed|local;
複製代碼
    值 描述
    scroll 相對於元素自己固定， 而不是隨着它的內容滾動。
    local 相對於元素的內容固定。若是一個元素擁有滾動機制，背景/遮罩將會隨着元素的內容滾動， 而且背景/遮罩的繪製區域和定位區域是相對於可滾動的區域而不是包含他們的邊框。
    fixed 相對於視口固定。即便一個元素擁有滾動機制，背景/遮罩也不會隨着元素的內容滾動。

    這裏咱們着重介紹 background-attachment。

    background-attachment 是 CSS3 視差特效最棒的實現方法。這裏推薦一下一位做者的文章寫得很是棒！滾動視差？CSS 不在話下

    這裏咱們也來實現一個炫技：

    想當作品：

    <div class="wrapper">
  <div class="container">
    <div class="div text">Love You!</div>
    <div class="div"></div>
    <div class="div text">Love Me!</div>
    <div class="div"></div>
    <div class="div text">Love life!</div>
  </div>
</div>
複製代碼
    ::-webkit-scrollbar {
  display: none;
}
.container {
  width: 30rem;
  height: 8rem;
  overflow: scroll;
  border: 1px solid red;
}
.container > div {
  width: 30rem;
  height: 8rem;
  background-color: #ffffff;
  font-size: 5rem;
  font-weight: bolder;
  color: transparent;
  text-align: center;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.container :nth-child(1) {
  -webkit-background-clip: text;
  background-image: url(../images/scene-1.jpg);
}
.container :nth-child(2) {
  background-image: url(../images/scene-0.jpg);
}
.container :nth-child(3) {
  -webkit-background-clip: text;
  background-image: url(../images/scene-2.jpg);
}
.container :nth-child(4) {
  background-image: url(../images/scene-4.jpg);
}
.container :nth-child(5) {
  -webkit-background-clip: text;
  background-image: url(../images/scene-3.jpg);
}
複製代碼

    這裏咱們經過設置 background-attachment: fixed;讓背景圖片相對於窗口固定，而不會讓背景圖片隨內容的滾動而滾動。

特性

background

  1. background-color

    給背景設置顏色。它的層級比背景圖片還靠後，是盒模型的最底部！

    開發人員應當在給元素設定背景圖的同時給元素指定背景色，當背景圖不可用時背景色替代。

mask

  1. mask-composite（不作詳細介紹）

    表示當同時使用多個圖片進行遮罩時候的混合方式。

    這裏只簡單的介紹其中幾個值：

    值 描述
    source-over 遮罩累加。
    source-in 重疊的位置是遮罩，不重疊的位置表現爲透明。
    source-out 重疊的位置是不遮罩，表現爲透明。

筆者專門在 github 上建立了一個倉庫，用於記錄平時學習全棧開發中的技巧、難點、易錯點，歡迎你們點擊下方連接瀏覽。若是以爲還不錯，就請給個小星星吧！👍

2019/04/05

AJie

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程