background-image

background-image: linear-gradient(red, green)
首先， 是可以直接放上一個(gè)漸變的。

image.png

.wrapper{
           width: 600px;
           height: 400px;
           border: 1px solid #fff;
           position: absolute;
           left: calc(50% - 300px);
           top: calc(50% - 200px);
           background-image: url('./timg1.jpeg'), url('./timg.jpeg');
           background-repeat: no-repeat;
           background-size: 300px 400px, 300px 400px;
           background-position: 0 0, 300px 0;
       }

image.png

background-origin: 定義圖片開(kāi)始渲染的位置,border-box, padding-box, content-box. 例如border-box, 就會(huì)從border處（包括border）開(kāi)始渲染。如果圖片超出容器大小， 還會(huì)渲染出去， 超出容器的大小。

background-position: 在background-origin的基礎(chǔ)上， 進(jìn)行定位。

background-clip: 定義圖片結(jié)束渲染的位置,border-box, padding-box, content-box， text. 將超出的部分剪掉。 很好理解， 說(shuō)說(shuō)text

.wrapper{
           font-size: 80px;
           font-weight: bold;
           background-image: url('./timg1.jpeg');
           -webkit-background-clip: text;
           background-clip: text;
           -webkit-text-fill-color: transparent;
           transition:  background-position .5s;
       }
.wrapper:hover{
          background-position: center center;
}

別忘了在wrapper里面寫(xiě)幾個(gè)字

image.png

.wrapper{
           margin: 200px auto;
           width: 200px;
           height: 200px;
           background-image: url('./timg.jpeg');
           background-size: 50px 50px;
           background-repeat: space;
       }

image.png

round: 會(huì)拉伸.
當(dāng)距離不夠添加大半個(gè)50 * 50 進(jìn)來(lái)的時(shí)候， 會(huì)把所有的圖片稍微拉伸， 不留空隙。 當(dāng)足夠大半個(gè)50 * 50添加進(jìn)來(lái)的時(shí)候， 會(huì)把所有的圖片稍微壓縮， 添加一張新的進(jìn)來(lái)， 同樣不留空隙。

round 和 space 可以同時(shí)寫(xiě)， 即橫向或者縱向。background-repeat: round space 即橫向round， 縱向space

background-attchment: scroll, fixed, local
scroll: 相對(duì)于容器進(jìn)行定位， 容器的位置不發(fā)生改變， 無(wú)論里面怎么滾動(dòng)， 都不會(huì)改變位置。類(lèi)似于fixed定位。背景圖片的位置相對(duì)于容器頂部的位置永遠(yuǎn)不改變。
local: 相對(duì)于容器內(nèi)的內(nèi)容進(jìn)行定位， 如果內(nèi)部發(fā)生滾動(dòng)， 就隨著內(nèi)容一起滾動(dòng)。是CSS3的屬性。
fixed: 相對(duì)于真正的視口進(jìn)行定位， 無(wú)論滾動(dòng)條怎么動(dòng)， 都不改變位置。但是一旦包裹它的容器離開(kāi)可視區(qū)域， 它也就不再可見(jiàn)。

background-size: cover, contain, ...其他尺寸
cover: 在不改變圖片狀態(tài)的前提下（拉伸， 壓縮），首先是一條邊對(duì)齊， 然后另一條邊等比縮放， 鋪滿(mǎn)容器。有些邊緣部分可能不會(huì)顯示
contain: 圖片一定會(huì)被全部顯示， 但是可能會(huì)有白邊

linear-gradient

創(chuàng)建線(xiàn)性漸變圖像。
background-image: linear-gradient(to top, #f0f, #ff0)

image.png

radial-gradient

創(chuàng)建徑向漸變圖像。

還有repeat-linear-gradient 和 repeat-radial-gradient 以后空了再細(xì)細(xì)研究吧。有些復(fù)雜， 且用得少，但是用好了還是很絢麗的。