從零開始學 Web 之 CSS3（三）漸變，background屬性

時間 2019-11-17

標籤開始 web css3 css 漸變 background 屬性欄目 HTML 简体版

原文原文鏈接

你們好，這裏是「從零開始學 Web 系列教程」，並在下列地址同步更新......css

github：https://github.com/Daotin/Web

微信公衆號：Web前端之巔

博客園：http://www.cnblogs.com/lvonve/

CSDN：https://blog.csdn.net/lvonve/

在這裏我會從 Web 前端零基礎開始，一步步學習 Web 相關的知識點，期間也會分享一些好玩的項目。如今就讓咱們一塊兒進入 Web 前端學習的冒險之旅吧！html

1、漸變

漸變是CSS3當中比較豐富多彩的一個特性，經過漸變咱們能夠實現許多炫麗的效果，有效的減小圖片的使用數量，而且具備很強的適應性和可擴展性。可分爲線性漸變、徑向漸變。前端

一、線性漸變

線性漸變：指沿着某條直線朝一個方向產生漸變效果。git

語法：程序員

background: linear-gradient(direction, color1, color2 [stop], color3...);

參數說明：github

direction：表示線性漸變的方向，
- to left：設置漸變爲從右到左。至關於: 270deg;
- to right：設置漸變從左到右。至關於: 90deg;
- to top：設置漸變從下到上。至關於: 0deg;
- to bottom：設置漸變從上到下。至關於: 180deg。這是默認值。
color1：起點顏色。
color2：過渡顏色，指定過渡顏色的位置 stop.
color3：結束顏色。你還能夠在後面添加更多的過渡顏色和位置，表示多種顏色的漸變。

示例：瀏覽器

background: linear-gradient(to right, blue, green 20%, yellow 50%, purple 80%, red);

二、徑向漸變

徑向漸變：指從一箇中心點開始沿着四周產生漸變效果。微信

語法：ide

background: radial-gradient(shape size at position, start-color, ..., color [stop] ..., last-color);

參數說明：性能

shape：漸變的形狀。
- ellipse表示橢圓形，
- circle表示圓形。默認爲ellipse，
若是元素寬高相同爲正方形，則ellipse和circle顯示同樣；

若是元素寬高不相同，默認效果爲 ellipse。
size：漸變的大小，即漸變到哪裏中止，它有四個值。
- closest-side：最近邊；
- farthest-side：最遠邊；
- closest-corner：最近角；
- farthest-corner：最遠角。默認是最遠角。
at position：漸變的中心位置。好比：
- at top left: 中心爲元素左上角位置
- at center center：中心爲元素中心位置
- at 5px 10px: 中心爲偏移元素左上角位置右邊5px，下邊10px位置。
start-color ：起始顏色
color ：漸變顏色，可選起始位置 stop。
last-color: 結束顏色。

注意：各個參數之間用空格隔開，而不是逗號隔開。

示例：

background: radial-gradient(circle farthest-side at right top, red, yellow 50%, blue);

三、重複漸變

語法：

repeating-linear-gradient /*線性重複漸變*/
repeating-radial-gradient /*徑向重複漸變*/

重複的話，就須要有一個重合的百分百做爲分界線。而後自動按照比例重複漸變。

示例：

<style>
        div:first-of-type {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            /* border: 1px solid blue; */

            background: repeating-radial-gradient(circle closest-side at center center, 
                        blue 0%, yellow 10%, blue 20%,
                        red 20%, yellow 30%, red 40%);
        }

        div:last-of-type {
            width: 800px;
            height: 10px;
            margin: 100px auto;
            /* border: 1px solid blue; */

            background: repeating-linear-gradient(45deg,
                        yellow 0%, blue 5%, red 10%,
                        red 10%, blue 15%, yellow 20%);
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
</body>

2、background 屬性

一、複習background屬性

/*添加背景顏色*/
background-color: #fff;

/*添加背景圖片*/
background-image: url("./images/img.jpg");

/*設置背景平鋪*/
background-repeat：repeat(默認) | no-repeat | repeat-x | repeat-y | round | space
/*新增兩個值：
    round:會將圖片進行縮放以後再平鋪。保證圖片完整緊湊排列。
    space:圖片不會縮放平鋪，只是會在圖片之間產生相同的間距值。
*/

/*背景定位*/
background-position：left | right | center（默認） | top | bottom 

/*背景是否滾動*/
background-attachment:scroll（默認） | fixed 
/* 說明：
    scroll: 背景圖的位置是基於盒子（假如是div）的範圍進行顯示；
    fixed：背景圖的位置是基於整個瀏覽器body的範圍進行顯示，若是背景圖定義在div裏面，而顯示的位置在瀏覽器範圍內可是不在div的範圍內的話，背景圖沒法顯示。
*/

local與scroll的區別：當滾動的是當前盒子（div）裏面的內容的時候，

local:背景圖片會跟隨內容一塊兒滾動；

scroll:背景圖片不會跟隨內容一塊兒滾動。

二、新增的background屬性

2.一、background-size

CSS裏的 background-size 屬性可以讓程序員決定如何在指定的元素裏展現，它經過各類不一樣是屬性值改變背景尺寸呈現的大小。每每建議不要將圖放大，若是有須要，儘可能讓圖縮小，以保證圖片的精度。

/*設置背景圖片的大小：寬度/高度   寬度/auto(保持比例自動縮放)*/
background-size: 100px 50px;
background-size: 100px;

/*設置百分比，是參照父容器可放置內容區域的百分比*/
background-size: 50% 50%;

/*設置contain:按比例調整圖片大小，使用圖片寬高自適應整個元素的背景區域，使圖片所有包含在容器內
1.圖片大於容器：有可能形成容器的空白區域,將圖片縮小
2.圖片小於容器：有可能形成容器的空白區域，將圖片放大*/
*background-size: contain;

/*cover:與contain恰好相反，背景圖片會按比例縮放自適應填充整個背景區域，若是背景區域不足以包含全部背景圖片，圖片內容會溢出
1.圖片大於容器：等比例縮小，會填滿整個背景區域，有可能形成圖片的某些區域不可見
2.圖片小於容器：等比例放大，填滿整個背景區域，圖片有可能形成某個方向上內容的溢出*/
background-size: cover;

2.二、background-origin

做用：提高用戶的響應區域。

咱們在 background-position 定位的時候，都是默認定位原點在元素的左上角來定位的。可不能夠調節定位的位置呢？

background-origin：能夠調節定位原點的位置。

語法：

background-origin: padding-box|border-box|content-box;

border-box：從border的左上角位置開始填充背景，會與border重疊；
padding-box：從padding的左上角位置開始填充背景，會與padding重疊；
content-box：從內容左上角的位置開始填充背景。

當設置 background-origin：content-box; 時，能夠將要顯示的圖片放在盒子中間，若是這時圖片是個精靈圖的話，旁邊會有其餘的圖干擾，怎麼辦呢，能不能只顯示我須要的精靈圖？看下面的 background-clip.

2.三、background-clip

background-clip：屬性規定背景的繪製區域.

雖然是設置裁切，可是控制的是顯示。說白了，就是設置最終顯示那些區域。

語法：

background-clip: border-box|padding-box|content-box;

border-box：只顯示border及之內的內容
padding-box：只顯示padding及之內的內容
content-box：只顯示content及之內的內容

因此，回到 2.2 節最後的問題，這時咱們再設置 background-clip:content-box; 就能夠屏蔽其餘不要的精靈圖了。

那麼爲何要這麼作呢？幹嗎把 a 標籤作的這麼大，跟須要的精靈圖同樣大很差嗎？

還記得手機通信錄右側的A-Z的列表嗎？容易點嗎？是否是很容易點錯？

我這樣作的目的就是提高用戶點擊的範圍，可是顯示的內容仍是之前的，這樣能夠提升用戶的使用體驗啊。

2.四、案例：精靈圖的使用

需求：爲一個塊元素設置精靈圖背景，精靈圖很小，可是須要更大的展現區域，可以以更大的範圍響應用戶的須要，可是隻須要顯示指定的背景圖片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /*提高移動端響應區域的大小*/
        a {
            display: block;
            width: 50px;
            height: 50px;   
            background: url("./images/sprites.png") -22px 0;
            background-repeat: no-repeat;
            padding: 15px;
            box-sizing: border-box;
            background-origin: content-box;
            background-clip: content-box;
        }
    </style>
</head>
<body>
    <a href="#"></a>
</body>
</html>

由圖可見，返回箭頭下 a 的範圍變大了，那麼用戶點擊的響應區域也就大了。