1.線性漸變（gradient變化）

　　linear-gradient線性漸變指沿著某條直線朝一個(gè)方向產(chǎn)生漸變效果。

上圖是從黃色漸變到綠色

background:linear-gradient(

　　to right 表示方向（left top right left 或者用度數(shù)表示）

　　yellow,漸變其實(shí)顏色

　　green 漸變終止顏色

);

?background:linear-gradient(
??????????to right,
??????????red 0%, red 25% ,
??????????blue 25%,blue 50%,
??????????green 50%,green 75%,
??????????pink 75% ,pink 100%
??????);??//起止顏色，終止顏色.

?

?background: linear-gradient(
????????135deg,
????????black 25%,
????????transparent 25%,
????????transparent 50%,
????????black 50%,
????????black 75%,
????????transparent 75%
?????);

background-size: 100px 100px;

animation: move 1s linear infinite;

@keyframes move {
?????from {}
???????to {
???????????background-position: 100px 0;
???????}
?????}

?

1、必要地 元素

　　方向

　　氣質(zhì)顏色

　　終止色

?

2.徑向漸變（radial徑向）

radial-gradient(徑向漸變指從一個(gè)中心開始沿著四周產(chǎn)生漸變效果)

?

background:radial-gradient(

　　150px at center

　　yellow,

　　green

);

//圍繞中心點(diǎn)做漸變，半徑是150px，從黃顏色到綠顏色做漸變.

1、必要的元素：

a、輻射范圍即圓半徑 ?(半徑越大，漸變效果越大)

b、中心點(diǎn) 即圓的中心??(中心點(diǎn)的位置是以盒子自身)

????background: radial-gradient(
????????????150px ?at left center,
???????????yellow,
???????????green
????????);

以左上角為圓的中心點(diǎn)

????background: radial-gradient(
????????????150px ?at 0px ?0px,
?????????????yellow,
?????????????green
????????);

c、漸變起始色

d、漸變終止色

2、關(guān)于中心點(diǎn)：中心位置參照的是盒子的左上角

3、關(guān)于輻射范圍：其半徑可以不等，即可以是橢圓

?

div{
?????????width: 300px;
?????????height: 300px;
?????????margin:100px auto;
?????????background: radial-gradient(
?????????????250px ?at 0px 0px,
?????????????yellow,
?????????????green
?????????);
?????????border-radius: 150px;
????}

?

3.背景

　　背景在css中也得到很大程度的增強(qiáng)，比如背景圖片的尺寸、背景裁切區(qū)域，背景定位參照點(diǎn)、多重背景等。

background-size：width,height可以設(shè)置背景圖片的寬度以及高度

1、background-size設(shè)置背景圖片的尺寸

?????background-size:600px,auto;

???????自動(dòng)是適應(yīng)盒子的寬度
?????????background-size: 100% auto;??當(dāng)寬度發(fā)送改變時(shí)，高度會(huì)有內(nèi)容溢出。

?????常規(guī)用法，通過百分百，和像素來調(diào)整背景的尺寸.

?????background-size: auto 100%;

cover會(huì)自動(dòng)調(diào)整縮放比例，保證圖片始終填充滿背景區(qū)域，如有溢出部分則會(huì)被隱藏。

整個(gè)背景圖片完整顯示在背景區(qū)域.

contain會(huì)自動(dòng)調(diào)整縮放比例，保證圖片始終完整顯示在背景區(qū)域。

也可以使用長度單位或百分比

2、background-origin(原點(diǎn)，起點(diǎn))

設(shè)置背景定位的原點(diǎn)

所謂的背景原點(diǎn)就是背景位置的一個(gè)參照點(diǎn)

調(diào)整背景定位的參照原點(diǎn)

background-repeat: no-repeat;

?

轉(zhuǎn)載于:https://www.cnblogs.com/webyg/p/5475751.html

總結(jié)

以上是生活随笔為你收集整理的css渐变/背景的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。