CSS3属性之background
接上，background來咯
目錄
1.box-shadow
（1）外陰影
（2）內陰影
（3）擴展玩法，傳無數個參
2.background-image
3.background-size
?4.background-position
?5.background-repeat
6.background-origin
7.background-clip
8.background-attachment
1.box-shadow
（1）外陰影
box-shadow有五個參數，接下來一一介紹，首先寫這樣一個小方塊
<!DOCTYPE html> <html lang="en"> <head><style>body {background: #000;}div {width: 100px;height: 100px;position: absolute;left: calc(50% - 50px);top: calc(50% - 50px);background: transparent;border:2px solid #fff;box-shadow: 0px 0px 0px 0px #fcc;}</style> </head> <body><div></div> </body> </html>將box-shadow的前4個參數值設為0，然后在控制臺改變其參數值，第五位參數值是顏色
第一位：陰影的水平偏移量
?第二位：陰影的垂直偏移量
第三位：blur
即，可以看到，當它的值增加時，其寬高超出了100px，即它是由邊界同時向里外兩個方向進行模糊的；其值越大，背景顏色透過來的越多，當其值增加到一定程度，就看不到了
第四位：spread
可以看到，它的傳播距離同時向4個邊增加
（2）內陰影
內陰影需在前標注inset，如下
<!DOCTYPE html> <html lang="en"> <head><style>body {background: #000;}div {width: 100px;height: 100px;position: absolute;left: calc(50% - 50px);top: calc(50% - 50px);background: transparent;border:2px solid #fff;box-shadow:inset 0px 0px 0px 0px #fcc;}</style> </head> <body><div></div> </body> </html>后續參數與外陰影相同，blur參數中，還是由邊界向兩邊模糊，但是從邊界外看不出來
（3）擴展玩法，傳無數個參
陰影就是由光直線傳播造成的，那現實生活中可以有很多光源，造成陰影重疊，CSS3自然也可實現啦，如下例
<!DOCTYPE html> <html lang="en"><head><style>body {background: #000;}div {width: 100px;height: 100px;position: absolute;left: calc(50% - 50px);top: calc(50% - 50px);background: transparent;border: 2px solid #fff;box-shadow: 3px 0px 5px 0px #f99,-3px 0px 5px 0px #9f9,0px 3px 5px 0px #99f,0px -3px 5px 0px #ff9;}</style> </head><body><div></div> </body></html>【結果】產生了四個陰影，理論上box-shadow可以傳無限個參數?
2.background-image
【例】添加一張背景圖片
<!DOCTYPE html> <html lang="en"> <head><style>div {width: 300px;height: 200px;position: absolute;left: calc(50% - 150px);top: calc(50% - 100px);background-image: url(./img/section1.jpg);background-size: 300px 200px;}</style> </head> <body><div></div> </body> </html>【結果】
?背景圖片可以添加很多張，需要其他屬性配合才能出效果，先介紹其他屬性再舉例吧
3.background-size
作用：設置背景圖片的尺寸，可以填像素值，也可以填cover，contain
【例1】cover：不改變圖片比例的前提下，用一張圖片完完整整的填充整個容器，但是圖片的某些部分可能無法顯示在背景中
<!DOCTYPE html> <html lang="en"> <head><style>div {width: 300px;height: 150px;border: 2px solid #000;background-image: url(./img/bg2.jpg);background-size: cover;background-repeat: no-repeat;}</style> </head> <body><div></div> </body> </html>【結果】
【例2】contain：不改變圖片的比例的前提下，讓容器包含一張完整的圖片，但是可能有部分容器填充不到。將上例background-size屬性值改為contain
【結果】?
?4.background-position
作用：設置每張背景圖片的位置，相對于background-origin（第6條）進行定位，例如：設置background-origin：border-box，則該背景圖片相對于border開始定位
【例1】
<!DOCTYPE html> <html lang="en"> <head><style>body {background-color: #000;}div {width: 300px;height: 200px;position: absolute;left: calc(50% - 150px);top: calc(50% - 100px);border: 20px solid transparent;padding: 20px;background-image: url(./img/bg2.jpg);background-origin: border-box;background-position: 20px 20px;}</style> </head> <body><div></div> </body> </html>【結果】
?5.background-repeat
作用：當背景圖片的大小不足以填充整個背景時，該屬性的屬性值可以決定如何填充背景，屬性值有repeat（默認值），no-repeat，round，space（其填充方式與border-image-repeat相同，上篇有講，不做贅述，感興趣可以自己試一下，蠻好玩的），repeat-x（水平方向平鋪），repeat-y（垂直方向平鋪）
【例1】no-repeat及前幾個屬性的舉例
<!DOCTYPE html> <html lang="en"> <head><style>body {background-color: #000;}div {width: 300px;height: 200px;position: absolute;left: calc(50% - 150px);top: calc(50% - 100px);background-image: url(./img/bg1.jpg), url(./img/bg3.jpg);background-size: 150px 200px;/* left top */background-position: 0 0, 150px 0; background-repeat: no-repeat;}</style> </head> <body><div></div> </body> </html>【結果】
【注】
6.background-origin
三個屬性值：border-box，padding-box，content-box，決定了背景圖片從哪里開始填充
【例1】border-box：從border的左上角開始填充到border的右下角
<!DOCTYPE html> <html lang="en"> <head><style>body {background-color: #000;}div {width: 300px;height: 200px;position: absolute;left: calc(50% - 150px);top: calc(50% - 100px);border: 20px solid transparent;padding: 20px;background-image: url(./img/bg2.jpg);background-origin: border-box;}</style> </head> <body><div></div> </body> </html>【結果】可以看到border下有背景圖片
?【例2】padding-box（默認值）：從padding的左上角填充到border的右下角，將上【例1】background-origin的屬性值修改為padding-box
【注】之所以border下有背景圖片是因為沒有設置repeat屬性，下面設置background-repeat:no-repeat康康效果
【例3】content-box：從content左上角開始填充到border的右下角，將【例1】background-origin的屬性值修改為content-box
7.background-clip
三個屬性值：border-box，padding-box，content-box，text，該屬性可以使背景圖片不填充屬性值外的盒模型
【例1】content-box
div {width: 300px;height: 200px;position: absolute;left: calc(50% - 150px);top: calc(50% - 100px);border: 20px solid transparent;padding: 20px;background-image: url(./img/bg2.jpg);background-origin: padding-box;background-clip: content-box; }?【結果】
【例2】text：背景圖片填充文字，該屬性值與-webkit-text-fill-color配合使用
<!DOCTYPE html> <html lang="en"> <head><style>* {margin: 0;padding: 0;}body {background-color: #000;font-size: 0;} div {width: 400px;height: 200px;line-height: 200px;text-align: center;position: absolute;left: calc(50% - 150px);top: calc(50% - 100px);border: 20px solid transparent;padding: 20px;background-image: url(./img/bg2.jpg);font-size: 100px;background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;text-fill-color: transparent; }</style> </head> <body><div>火影忍者</div> </body> </html>【結果】
8.background-attachment
三個常用屬性值：scroll，local，fixed
【例1】scroll：相對于內容區定位，相當于position：fixed
<!DOCTYPE html> <html lang="en"> <head><style>div {width: 500px;height: 500px;position: absolute;top: calc(50% - 250px);left: calc(50% - 250px);border: 2px solid #424242;border-radius: 10px;background-color: #fee;color: #424242;text-indent: 28px;overflow: scroll;background-image: url(./img/bg6.jpg);background-size: 200px 300px;background-repeat: no-repeat;background-position: 150px 100px;background-attachment: scroll;}</style> </head> <body><div><p> 金香很吃力的把兩扇沉重的老式拉門雙手推到墻里面去。門這邊是客廳。墻上掛著些中國山水畫，都給配了鏡框子，那紅木框子沉甸甸的壓在輕描淡寫的畫面上，很不相稱，如同薄紗旗袍上滾了極闊的黑邊。那時候女太太們剛興著用一種油漆描花，上面灑一層閃光的小珠子，也成為一種蘭閨韻事。這里的太太就在自己鞋頭畫了花，沙發靠墊上也畫了同樣的花。然而這一點點女性的手觸在這陰暗的大客廳里簡直看不到什么。</p><p>門那邊，陳寶初陳寶余兄弟倆在那里吃早飯。兩人在他們姊夫家里住了一暑假，姊姊姊夫是太太老爺，他們便被稱作大舅老爺二舅老爺，雖然都還是年紀很輕的大學生，寶初今年剛畢業。這一天，寶余只管把熏魚頭肉骨頭拋到桌子底下喂狗吃，寶初便道：“你不要去引那個狗了！把這地方糟蹋得這樣子！”寶余笑道：“你看這小家伙多有意思！”他見那丫頭金香走了過來，越發高興起來了，撕了一塊油雞逗的那狗直往桌上蹦，笑道：“金香你看你看！”金香一眼瞥見寶初的臉色有點不快，便道：“喲！這狗得洗澡了！”一面又去拿掃帚畚箕，說道：“我來掃掃，是不能再給它吃了！”她一說，寶余就歇了手，訕訕的自去吃粥。</p><p>金香掃了地，又去捉狗，說：“去洗澡去?！边@狗是個黑白花的叭兒狗，臉是白的，頭上有些黑毛絲絲縷縷披下來，掩沒了上半個臉，活像個小女孩子，瞪著大眼珠子在那前溜海后面偷偷的看人。</p><p>金香把狗抱在懷中，寶余便湊上前去撈撈狗的下頷，笑道：“你看我們多美啊，前溜海兒……還帶著這眼神兒，就跟你一樣，就苦臉上沒搽胭脂?！苯鹣愠樯泶?#xff0c;卻被寶余一只手指鉤住了狗的領圈。她道：“二舅老爺，你別瞎鬧了。”寶余道：“怎么，你不搽胭脂的么？”金香道：“誰搽胭脂呢？”然而她的確是非常紅的“紅顏”，前溜海與濃睫毛有侵入眼睛的趨勢，欺侮得一雙眼睛總是水汪汪的。圓臉，細腰身，然而同時又是胖胖的。穿著套花布的短衫長褲，淡藍布上亂堆著綠心的小白素馨花。她搭訕著就把狗抱走了，自言自語道：“狗幾天不洗就要虼蚤多了！”寶余趕在她后面失驚打怪的叫了聲：“喏，真的，這多么虼蚤！”金香倒給他嚇了一跳，一回頭，他便在她背上摸了一把，道：“喏，在這兒！在這兒！”金香恨道：“二舅老爺真是！”寶余涎著臉笑道：“真是怎么？真是好，是罷？”金香早走了，也沒聽見。</p><p>寶初先一直沒做聲。雖說是自己的兄弟，究竟是異母的。兩人同是庶出，寶初的母親死得早，那時候寶余的母親還只有一個女兒，就把寶初撥給她，歸她撫養了。后來又添了寶余。在這樣的環境里長大的寶初，本來就是個靜悄悄的人，今年這一夏天過下來，更沉郁了些，因為從讀書到找事，就像是從做女兒到做媳婦，對于人世的艱難知道得更深了一些。今天他實在有點看不過去了，金香一走他就說寶余：“二弟，你真是的，總這樣子跟金香油嘴滑舌的——叫人看不起！讓姊夫聽見了，不大好。”寶余笑道：“你怎么啦？你總是看不得我跟金香說話，一來就這么</p></div> </body> </html>【結果】
【例2】local：相對于文字定位，相當于position：absolute，將【例1】background-attachment屬性值改為local
【結果】
【例3】fixed：相對于可視區定位，將【例1】background-attachment屬性值改為fixed，且設置body的height值為1900px（為了顯示滾動條）
【結果】
終于寫完了，讀API沒get到的點處理完了，不過還有一個遺留問題，關于漸變色的，linear-gradient和radial-gradient，下篇講吧，這篇內容太多了
超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生總結
以上是生活随笔為你收集整理的CSS3属性之background的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS3之border
- 下一篇： linear-gradient rad