CSS背景處理

時間  2020-07-14
標籤 css 背景 處理 欄目 CSS 简体版
原文   原文鏈接

CSS背景處理

背景樣式

背景顏色

　　若是想讓一個區域具備純色的背景，可使用background-color進行設置，背景顏色能夠是rgb，rgba，#16網頁色。html

 

image-20200713135614383

 

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
​
        span{
            
            color: white;
        }
​
    </style>
    <title>Document</title>
</head>
<body>
​
    <span>來看看個人背景色吧！</span>
​
</body>
</html>
背景顏色

 

背景圖片

　　若是想加入背景圖片，請使用background-image:url();進行設置。ide

　　請注意：背景圖片默認不會改變本來盒子的大小。與在盒子中插入<img>是不一樣的。url

 

image-20200713141512407

 

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
​
        div{
            background-image: url("./33.jpg");
            color: green;
            font-weight: 700;
            height: 200px;
            width: 200px;
            text-align: center;
            line-height: 200px;
            border: solid 1px red;
            padding: 20px;
        }
        
​
    </style>
    <title>Document</title>
</head>
<body>
​
    <div>來看看個人背景圖片吧~</div>
​
</body>
</html>
背景圖片

 

背景剪裁

　　咱們能夠將背景設置爲盒子的某一區域，好比content區域或者padding區域以及border區域。spa

　　請使用background-clip來進行指定。3d

 

選項 說明
border-box 包括邊框
padding-box 不含邊框，包括內邊距
content-box 內容區域

 

image-20200713140710953

 

 

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
​
        div{
            background-image: url("./33.jpg");
            color: green;
            font-weight: 700;
            height: 200px;
            width: 200px;
            text-align: center;
            line-height: 200px;
            border: solid 1px red;
            padding: 20px;
            /* 背景圖片爲content區域 */
            background-clip: content-box;
        }
        
​
    </style>
    <title>Document</title>
</head>
<body>
​
    <div>來看看個人背景圖片吧~</div>
​
</body>
</html>
背景剪裁

 

背景重複

　　若是背景圖過小，那麼默認會進行重複行爲，以下所示。可是咱們可使用background-repeat爲它指定如何重複。code

 

選項 說明
repeat 水平、垂直重複
repeat-x 水平重複
repeat-y 垂直重複
no-repeat 不重複
space 背景圖片對稱均勻分佈

 

　　不指定，默認repea：htm

 

image-20200713140920550

 

　　指定爲no-repeat：blog

 

image-20200713141216547

 

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
​
        div{
            background-image: url("./33.jpg");
            color: green;
            font-weight: 700;
            height: 500px;
            width: 500px;
            text-align: center;
            line-height: 200px;
            border: solid 1px red;
            /* 不重複產生圖片 */
            background-repeat: no-repeat;
        }
        
​
    </style>
    <title>Document</title>
</head>
<body>
​
    <div></div>
​
</body>
</html>
取消背景重複

 

背景滾動

　　咱們可使用background-attachment爲背景指定究竟是跟隨滾動條滾動仍是在一個固定的位置不滾動。默認是scroll，即跟隨滾動條滾動的。圖片

 

選項 說明
scroll 背景滾動
fixed 背景固定

 

image-20200713144036413

 

image-20200713144119494

 

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
​
        main{
            /* 主容器要小於子容器纔會出現滾動條 */
            overflow: auto;
            border: solid 1px red;
            height: 200px;
            width: 400px;
        }
        div{
            background-image: url("./33.jpg");
            height: 300px;
            width: 300px;
            /* 不重複產生圖片 */
            background-repeat: no-repeat;
            /* 子容器背景圖固定 */
            background-attachment: fixed;
        }
        
​
    </style>
    <title>Document</title>
</head>
<body>
    <main>
        <div>文本在此</div>
    </main>
​
​
</body>
</html>
背景固定

 

背景位置

　　咱們可使用background-position設置背景圖片的水平、垂直定位。ip

選項 說明
left 左對齊
right 右對齊
center 居中對齊
top 頂端對齊
bottom 底部對齊

 

　　只設置center爲水平，垂直居中。

　　設置left center則爲水平居左，垂直居中。

　　設置right center則爲水平居右，垂直居中。

　　設置center left則爲水平居中，垂直居左。

　　設置center right則爲水平居中，垂直居右。

 

　　固然，咱們也可使用%來爲它進行設置，%50爲居中。

 

image-20200713144918833

 

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
​
        div{
            background-image: url("./33.jpg");
            height: 500px;
            width: 500px;
            border: solid 1px red;
            /* 不重複產生圖片 */
            background-repeat: no-repeat;
            /* 水平居左，垂直居中 */
            background-position:0% 50%;
        }
        
​
    </style>
    <title>Document</title>
</head>
<body>
​
    <div></div>
​
</body>
</html>
背景位置

 

背景尺寸

　　咱們可使用background-size來設置背景尺寸，單位能夠是單詞，%，px，em以及rem。

　　當使用單詞設置的時候一個詞就能夠搞定，而其餘設置時須要兩個單位，第一個爲背景高度，第二個爲背景寬度。

 

選項 說明
cover 背景徹底覆蓋，可能會有背景溢出
contain 圖片不溢出的放在容器中，可能會漏出部分區域

 

　　指定數值定義寬高尺寸

background-size: 50% 100%;
或
background-size: 200px 200px;

 

 

　　寬度固定高度自動（這個經常使用）

background-size: 50% auto;

 

image-20200713145456046

 

 

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
​
        div{
            background-image: url("./33.jpg");
            height: 200px;
            width: 200px;
            border: solid 1px red;
            background-repeat: no-repeat;
            /* 水平居左，垂直居中 */
            background-position:0% 50%;
            /* 背景自動鋪滿整個盒子 */
            background-size:cover;
        }
        
​
    </style>
    <title>Document</title>
</head>
<body>
​
    <div></div>
​
</body>
</html>
背景尺寸

 

簡寫

　　咱們能夠直接使用background來進行簡寫。

　　推薦順序：顏色，地址，是否重複，背景裁剪，背景尺寸或是否跟隨滾動

 

　　如：

background:red url(./33.jpg) no-repeat border-box center;

 

image-20200713151123579

 

 

多個背景

　　咱們可使用background-image: url(路徑), url(路徑);來一次指定多個背景。

 

　　就如同上面同樣，咱們一次給他定義了2個背景一個紅色，一個圖片。

 

背景陰影

　　咱們可使用 box-shadow 對盒子元素設置陰影，參數爲 水平偏移,垂直偏移,模糊度,顏色 構成。

 

image-20200713151716219

 

 

<!DOCTYPE html>
<html lang="en">
​
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
​
        div{
            height: 100px;
            width: 100px;
            border: solid 1px #ddd;
            box-shadow: 10px 10px 5px rgba(100, 100, 100, .5);
        }
        
​
    </style>
    <title>Document</title>
</head>
<body>
​
    <div></div>
​
</body>
</html>
背景陰影

 

 

顏色漸變

線性漸變

　　漸變通常都是在背景顏色中進行使用，格式爲background: linear-gradient(方向, 顏色, 顏色, ...);。

 

image-20200713151947910

 

/* 紅色到綠色，能夠看到是線性的漸變 */
background: linear-gradient(red, green);

 

　　使用度數deg能夠改變漸變角度，若是爲負數則表明相反方向。

image-20200713152120307

/* 傾斜30°，紅色到綠色 */
background: linear-gradient(30deg, red, green);

 

　　咱們可使用to 方向1 方向2指定漸變的方向，注意：不能用度數deg同時使用

 

image-20200713152512469

 

/* 向右漸變 ，紅色到綠色 */
background: linear-gradient(to right, red, green)

 

image-20200713153116256

 

/* 向左漸變 ，紅色到綠色 */
background: linear-gradient(to left, red, green)

 

image-20200713153413520

 

/* 向左上漸變 ，紅色到綠色 */
background: linear-gradient(to left top, red, green)

 

image-20200713153553241

 

/* 向右下漸變 ，紅色到綠色 */
background: linear-gradient(to right bottom, red, green)

 

　　同時，咱們能夠設置多顏色漸變。

 

image-20200713153719825

 

/* 向右漸變 ，紅色到綠色到藍色到黃色 */
background: linear-gradient(to right, red, green, blue, yellow)

 

徑向漸變

　　格式爲background: radial-gradient(方向, 寬度, 顏色, 顏色, ...);。

 

image-20200713154136972

 

/* 紅色到綠色，能夠看到是徑向的漸變 */
background: radial-gradient(red, green);

 

　　咱們能夠設置漸變色的寬度。

image-20200713154320317

 

/* 紅色到綠色，設置寬度 */
background: radial-gradient(50px 50px,red, green);

 

　　咱們可使用at 方向1 方向2來進行漸變方向控制。

 

image-20200713155000684

 

/* 紅色到綠色，漸變方向爲右上，因爲設置了寬度，效果並不美觀。*/
background: radial-gradient(at right top ,red 200px, green 20px);

 

image-20200713155054506

 

/* 紅色到綠色，漸變方向爲左下，因爲設置了寬度，效果並不美觀。*/
background: radial-gradient(at left bottom ,red 200px, green 20px);

 

image-20200713155147379

 

/* 紅色到綠色，漸變方向爲左側向中心，因爲設置了寬度，效果並不美觀。*/
background: radial-gradient(at left center ,red 200px, green 20px);

 

image-20200713155412541

 

/* 紅色到綠色，漸變方向爲底部向中心，因爲未設置寬度，效果好一些了*/
background: radial-gradient(at bottom center ,red, green);
        }

 

　　咱們依然能夠設置不少顏色來進行漸變。

 

image-20200713155711498

 

/* 紅色到綠色到藍色到黃色，漸變方向爲底部向中心，因爲未設置寬度，效果好一些了*/
background: radial-gradient(at bottom center ,red, green ,blue ,yellow);
        }

 

標識位

　　當未指定標識位時，顏色的漸變很均勻。一旦指定了標識位，就會發生突變。

 

　　未設置標識位：

 

image-20200713160044568

 

 

　　單方設置了標識位：

 

image-20200713160247150

 

background: linear-gradient(90deg, red 60%, blue);

 

　　雙方設置了標識位：

 

image-20200713160159189

 

background: linear-gradient(90deg, red 60%, blue 40%);

 

　　使用徑向標識位繪製太陽

image-20200713160522794

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

        div{
            height: 300px;
            width: 300px;
            border: solid 1px #ddd;
            background: radial-gradient(red 10%,yellow 30%,black 70%)
        }
        

    </style>
    <title>Document</title>
</head>
<body>

    <div></div>

</body>
</html>
徑像漸變繪製小太陽

 

中間點閾值

　　所謂中間點閾值，指的就是兩個顏色漸變的時候，從哪一個點開始讓一個顏色漸變到另外一個顏色。

　　好比這個示例，紅色標識位爲60%，藍色標識位爲40%，漸變的中間點閾值就只能變成0了。

 

image-20200713160159189

 

　　再好比這個示例，單方設置了標識位，那麼它的閾值就是由系統產生的，因此咱們才能看見它漸變的效果。

 

image-20200713160247150

 

　　怎麼設置中間點閾值呢？看下面這段代碼。

 

image-20200713162235377

 

/* 0%就是中間點閾值，當設置爲0後那麼紅色變藍色會由0%的位置開始 */
background: linear-gradient(90deg, red ,0%, blue);

 

image-20200713162650600

 

/* 咱們的中間點閾值是20%，先是紅色佔了10%，那麼可觀測範圍中中間點閾值也就只有10%了，因此上圖的漸變區域爲10% */
background: linear-gradient(90deg, red 10% ,20%, blue 80%);

 

線性漸變重複

　　要想使用線性漸變重複，請使用repeating-linear-gradient。

 

image-20200713163323965

 

/* 一個格子爲 75px */
background: repeating-linear-gradient(90deg, blue, 25px, red 50px);

 

　　若是咱們想要生硬的顏色，咱們還須要再隨便加一個顏色充當過渡。

 

image-20200713163235392

 

background: repeating-linear-gradient(90deg, blue, 25px, yellow 25px, 25px, red 50px);

 

徑向漸變重複

　　要想使用線性漸變重複，請使用repeating-radial-gradient。

 

image-20200713163938374

 

background: repeating-radial-gradient(20px 20px, red 0%, yellow 20%, blue 30%, green 50%);

 

　　若是你還對標識位，中間點有什麼疑惑，那麼能夠仔細找一找代碼中的規律。

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