css 背景和漸變

k00baa 發(fā)布于2019-08-30 15:52 / 1809人閱讀

css 背景和漸變 background 背景

所有背景屬性都不能繼承

在CSS2.1里，background屬性的簡(jiǎn)寫(xiě)方式包含五種屬性值 – background-color, background-image, background-repeat, background-attachment, and background-position

CSS3開(kāi)始，又增加了3個(gè)新的屬性值
注意：反斜杠可以在支持這種寫(xiě)法的瀏覽器里在position后面接著寫(xiě)background-size

background: [background-color] 
            [background-image] 
            [background-repeat]
            [background-attachment] 
            [background-position] / [ background-size]
            [background-origin] 
            [background-clip];

background-color 背景色
不能繼承，其默認(rèn)值是 transparent

background-image 背景圖片
默認(rèn)值是 none

可設(shè)置多幅背景圖片 background-image:url(bg_flower.gif),url(bg_flower_2.gif);

background-repeat 背景圖片平鋪
其值可為（ repeat | no-repeat | repeat-x | repeat-y ）

默認(rèn)為repeat

background-attachment 背景關(guān)聯(lián)

如果文檔比較長(zhǎng)，那么當(dāng)文檔向下滾動(dòng)時(shí)，背景圖像也會(huì)隨之滾動(dòng)。當(dāng)文檔滾動(dòng)到超過(guò)圖像的位置時(shí)，圖像就會(huì)消失。

其值可為（ fixed | scroll ）

默認(rèn)值是 scroll，背景會(huì)隨文檔滾動(dòng)

可以聲明圖像相對(duì)于可視區(qū)是固定的（fixed）

background-position 背景定位

不超過(guò)兩個(gè)關(guān)鍵字，水平方向和垂直方向

只出現(xiàn)一個(gè)關(guān)鍵字，另一個(gè)認(rèn)為是center

其值可為（ top，bottom，left，right，center，長(zhǎng)度值，百分?jǐn)?shù)值）

默認(rèn)為 0% 0%，即top left ，元素內(nèi)邊距區(qū)的左上角(padding-box)

background-size 背景圖像尺寸

默認(rèn)值auto，寬度和高度，只有一個(gè)值，第二個(gè)被設(shè)置為auto

其值可為（長(zhǎng)度值，百分?jǐn)?shù)值，cover ，contain ）

cover 把背景圖像擴(kuò)展至足夠大，以使背景圖像完全覆蓋背景區(qū)域。背景圖像的某些部分也許無(wú)法顯示在背景定位區(qū)域中。

contain 把圖像圖像擴(kuò)展至最大尺寸，以使其寬度和高度完全適應(yīng)內(nèi)容區(qū)域

background-origin 定位中心點(diǎn)

注意：如果背景圖像的 background-attachment 屬性為 "fixed"，則該屬性沒(méi)有效果

默認(rèn)值 padding-box

其值可為（ padding-box | border-box | content-box ）

background-clip 背景的繪制區(qū)域

默認(rèn)值 border-box ，背景被裁剪到邊框盒

其值可為（ border-box | padding-box | content-box ）

背景定位

background-position 擴(kuò)展語(yǔ)法

> 允許我們指定背景圖片`距離任意角的偏移量`,`在偏移量前面指定關(guān)鍵字`

background-position: right 20px bottom 10px;

需要提供一個(gè)合適的回退方案,在不支持 background-position 擴(kuò)展語(yǔ)法的瀏覽器中,背景圖片會(huì)緊 貼在左上角(背景圖片的默認(rèn)位置)

background: url(code-pirate.svg) no-repeat bottom right #58a;
background-position: right 20px bottom 10px;

background-origin

問(wèn)題：偏移量與容器的內(nèi)邊距一致

默認(rèn)情況下,background-position 是以 padding box 為準(zhǔn)的

如果把background-origin值改成 content-box,則在 background-position 屬性中使用的邊角關(guān)鍵字將會(huì)以內(nèi)容區(qū)的邊緣作為基準(zhǔn)(也就是說(shuō),此時(shí)背景圖片距離邊角的偏移量就跟內(nèi)邊距保持一致了)

padding: 10px;
background: url("code-pirate.svg") no-repeat #58a bottom right; /* 或 100% 100% */ 
background-origin: content-box;

calc()

background: url("code-pirate.svg") no-repeat; 
background-position: calc(100% - 20px) calc(100% - 10px);

偽隨機(jī)背景

重復(fù)平鋪的圖案有一定規(guī)律可循，如下面代碼

background: linear-gradient(90deg,
                            #fb3 15%, #655 0, 
                            #655 40%,#ab4 0, 
                            #ab4 65%, hsl(20, 40%, 90%) 0);
background-size: 80px 100%;

每80px（即 background-size 的值）重復(fù)一次

方法：

把平鋪間距最大的貼片安排在最頂層
仍然可以看出圖案每隔 240px 就會(huì)重復(fù)一次,

貼片（多層漸變合成的最終圖案中可感知的重復(fù)單元）的尺寸實(shí)際上就是所有 background-size 的最小公倍數(shù)

background: hsl(20, 40%, 90%);
background-image:
 linear-gradient(90deg, #fb3 10px, transparent 0),
 linear-gradient(90deg, #ab4 20px, transparent 0),
 linear-gradient(90deg, #655 20px, transparent 0);
background-size: 80px 100%, 60px 100%, 40px 100%;

把貼片的尺寸最大化
“蟬原則”：數(shù)字最好是“相對(duì)質(zhì)數(shù)”，在這種情況下，它們的最小公倍數(shù)就是它們的乘積

要達(dá)成相對(duì)質(zhì)數(shù)，最簡(jiǎn)單的辦法就是盡量選擇質(zhì)數(shù)，因?yàn)橘|(zhì)數(shù)跟其他任意數(shù)字都是相對(duì)質(zhì)數(shù)

gradient 漸變

linear-gradient 線性漸變

語(yǔ)法 ： background: linear-gradient(direction/angle, color-stop1, color-stop2, ...);

background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */
background: linear-gradient(red, blue); /* 標(biāo)準(zhǔn)的語(yǔ)法,必須放最后 */

+ direction/angle 方向或角度
    - direction 使用方向
        + 預(yù)定義方向 left,top等
        + 可為起始方向 (left 從左到右 ) | (left,top 對(duì)角)
        + 可定義到達(dá)方向 - 使用 to 表示 (to right) | (to right bottom ) 
    - angle 使用角度
        * 角度是指水平線和漸變線之間的角度，逆時(shí)針?lè)较蛴?jì)算
        * 0deg 將創(chuàng)建一個(gè)從下到上的漸變，90deg 將創(chuàng)建一個(gè)從左到右的漸變
        ![角度 對(duì)應(yīng) 方向](http://www.runoob.com/wp-content/uploads/2014/07/7B0CC41A-86DC-4E1B-8A69-A410E6764B91.jpg)
+ 至少定義兩種顏色結(jié)點(diǎn)(起點(diǎn)色，中止色)
    - 設(shè)置透明度可為 rgba() 
    - 可指定起止色位置，百分比或長(zhǎng)度值 
        + (red 30%,blue 50%) ，則30%-50%間是兩種顏色的漸變，其余部分為實(shí)色
        + 如果某個(gè)色標(biāo)的位置值比整個(gè)列表中在它之前的色標(biāo)的位置值都要小，則該色標(biāo)的位置值會(huì)被設(shè)置為它前面所有色標(biāo)位置值的最大值

background: linear-gradient(#fb3 33.3%, #58a 0, 
                            #58a 66.6%, yellowgreen 0);

等同于：

background: linear-gradient(#fb3 33.3%, #58a 33.3%, 
                            #58a 66.6%, yellowgreen 66.6%);

repeating-linear-gradient 重復(fù)的線性漸變

適用于斜向條紋

為這些長(zhǎng)度是直接在漸變軸上進(jìn)行度量的，直接代表了條紋自身的寬度

不論條紋角度如何，在創(chuàng)建雙色條紋時(shí)都需要四個(gè)色標(biāo)

background: linear-gradient(45deg,
                            #fb3 25%, #58a 0, 
                            #58a 50%,#fb3 0, 
                            #fb3 75%, #58a 0);
background-size: 42.426406871px 42.426406871px;

等同于：

background: repeating-linear-gradient(45deg,
                                      #fb3, #fb3 15px, 
                                      #58a 0, #58a 30px);

同色系條紋（明亮度有差異）

主色調(diào)和淺色變體組成
方法是：把最深的顏色指定為背景色，同時(shí)把半透明白色的條紋疊加在背景色之上來(lái)得到淺色條紋
修改時(shí)，只需改動(dòng)背景色

background: #58a;
background-image: repeating-linear-gradient(30deg,
hsla(0,0%,100%,.1),hsla(0,0%,100%,.1) 15px,
transparent 0, transparent 30px);

radial-gradient 徑向漸變

語(yǔ)法：background: radial-gradient(position, shape size, start-color, ..., last-color);

repeating-radial-gradient 重復(fù)的徑向漸變

background-image: repeating-radial-gradient(red,green 40px, orange 80px);

云服務(wù)器 GPU云服務(wù)器背景漸變網(wǎng)頁(yè)背景漸變背景色漸變 css和html

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/116521.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

k00baa

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow雙向lstm

閱讀 1193·2023-04-26 02:42
【快樂(lè)水題】495. 提莫攻擊

閱讀 1637·2021-11-12 10:36
shockhosting新加坡VPS簡(jiǎn)單測(cè)評(píng)（1Gbps帶寬）

閱讀 1795·2021-10-25 09:47
#八月優(yōu)惠#Hostodo：1核/512M/16G NVMe/3T/1Gbps/美國(guó)多機(jī)房/年付$1

閱讀 1270·2021-08-18 10:22
css 背景和漸變

閱讀 1810·2019-08-30 15:52
CSS實(shí)現(xiàn)兩個(gè)球相交的粘粘效果

閱讀 1221·2019-08-30 10:54
重學(xué)前端學(xué)習(xí)筆記（八）--JavaScript中的原型和類

閱讀 2640·2019-08-29 18:46
利用 es6 new.target 來(lái)對(duì)模擬抽象類

閱讀 3503·2019-08-26 18:27

国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

css 背景和漸變

相關(guān)文章

**[譯]HTML&CSS Lesson7: 設(shè)置背景和漸變色**

**[譯]HTML&CSS Lesson7: 設(shè)置背景和漸變色**

**[譯]HTML&CSS Lesson7: 設(shè)置背景和漸變色**

CSS 設(shè)計(jì)指南學(xué)習(xí)筆記二

CSS斜切角

CSS漸變之背景、邊框、字體漸變

發(fā)表評(píng)論

0條評(píng)論

k00baa

男|高級(jí)講師

TA的文章

tensorflow雙向lstm

【快樂(lè)水題】495. 提莫攻擊

shockhosting新加坡VPS簡(jiǎn)單測(cè)評(píng)（1Gbps帶寬）

#八月優(yōu)惠#Hostodo：1核/512M/16G NVMe/3T/1Gbps/美國(guó)多機(jī)房/年付$1