background

background:url position no-repeate; //參數1：url鏈接 ；參數2：位置信息，第一個是水平位置可以寫px，也可以寫left/right，第二個是垂直位置 參數3：是否重復(默認重復)

    .box {
        background: url("border.png") 10px bottom no-repeat;
        background-size: 100px 100px;
        background-origin: content-box;
    }

除了第一個參數都可以省略
background-size：縮放背景圖片的大小，px或者%（百分比相對于盒子的大小）
background-origin：content-box, padding-box,和 border-box區域內可以放置背景圖像。
background-clip: border-box|padding-box|content-box;從指定位置開始繪制

漸變色

線性漸變

.box {
    background: linear-gradient(to left top,yellow,blue,red);
}

參數1：**記得加to（谷歌），方向 上/下/左/右/對角線 ，省略的話默認從上到下；也可以角度，180deg，不用加to 參數二：漸變的顏色，可以寫多個

　　

　　/*重復的線性漸變*/
　　 background: repeating-linear-gradient(red, yellow 10%, green 20%);

徑向漸變

.box {
    background: radial-gradient(circle, red, yellow, green);
}

參數1：定義形狀，默認ellipse（橢圓），circle（圓） 參數2：多個漸變顏色

/*重復的徑向漸變*/
.box {
    background: repeating-radial-gradient(circle, red, yellow 10%, green 20%);
}

總結

以上是生活随笔為你收集整理的CSS3新增特性-background以及渐变色的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。