关于background-*的一些属性
1、盒模型
盒模型從外到內(nèi)一次為：margin-box、border-box、padding-box、content-box。? ? ?
2、一些屬性設(shè)置的相對(duì)位置
⑴background-position的屬性值（top/right/bottom/left/center）起始位置是相對(duì)于padding-box外邊沿開始的，background-position: x% y%,水平方向和垂直方向。。
⑵當(dāng)容器的大小(content的width或height加上所設(shè)置的padding值)小于圖片本身大小時(shí)，圖片的left、top不和border重合，但right、bottom會(huì)和border重合。
⑶background-color的起始位置是相對(duì)于border-box外邊沿開始設(shè)置的。
⑷background-image的起始值是相對(duì)于padding-box外邊沿設(shè)置的。
問題：設(shè)置背景圖片位于容器的右邊20px、底邊20px(設(shè)置margin-right、margin-bottom屬性沒有效果時(shí))解決方案如下：
①利用CSS3支持相對(duì)任意角偏移，在偏移量前指定關(guān)鍵字即可，如：background-position: right 20px bottom 20px;
②將background-origin屬性值設(shè)置為content-box(默認(rèn)的是padding-box)。
③利用calc()函數(shù)，以相對(duì)左上角偏移量計(jì)算，background-position: calc(100% - 20px) calc(100% - 20px)。
④margin-right設(shè)置后沒有變化。其實(shí)margin-right是有效果的，只是在默認(rèn)即標(biāo)準(zhǔn)流的情況下顯示不出效果，瀏覽器默認(rèn)是從左向右渲染，所以margin-right/margin-bottom設(shè)置不起作用。但在脫離標(biāo)準(zhǔn)流的時(shí)候(設(shè)置float：right，注意設(shè)置float：left不起作用)，margin-right效果就出來了(但我不知道m(xù)argin-bottom要怎么設(shè)置，嗯！！！,
<div class="myDiv"><!--以下代碼測(cè)試B 1、--><div style="float: left; width: 40px; height: 50px; border: 1px solid #000; margin-right: 80px; margin-bottom: 200px;"></div></div> .myDiv {box-sizing: content-box;width: 230px;height: 180px;border: 10px dashed rgba(0, 0, 0,.2);padding: 20px;/* ⑴⑵ */background: url(shop06QZ.png) no-repeat top left;
/* ⑶ */background-color: lightblue; /* ⑷、* background-image: url(shop06QZ.png); * background-image是相對(duì)于padding-box設(shè)置的* background-repeat: no-repeat;*//* ① *//*background-position: right 20px bottom 20px;*/ /* ② *//*background-position: right bottom;background-origin: content-box;*//* ③ */background-position: calc(100% - 20px) calc(100% - 20px);} ?
?
3、設(shè)置background-repeat對(duì)background-position的影響
以上訴代碼為例，?background: url(shop06QZ.png) no-repeat top left；在這段代碼中可以知道，background-repeat: no-repeat、background-postion: left top。background-position的位置是相對(duì)于padding-box設(shè)置的，也就是圖片不會(huì)出現(xiàn)在border邊界上(值設(shè)大點(diǎn)，對(duì)比明白)，當(dāng)background-repeat不為no-repeat時(shí)，如repeat-x（水平方向的平鋪），則背景圖片與左、右邊框重疊；repeat-y（垂直方向平鋪），則背景圖片與上、下邊重疊；repeat（水平和垂直方向），則背景圖片會(huì)從border-box外邊沿開始，也就是四邊被填充。
?4、background-clip、background-origin
background-clip: 指定背景（顏色、圖片）在哪個(gè)區(qū)域（邊框border-box、內(nèi)邊距padding-box、內(nèi)容content-box）出現(xiàn)，僅僅是指背景可以從哪個(gè)位置開始顯示而已。
background-origin: 背景從哪個(gè)區(qū)域(border-box、padding-box、content-box）開始繪制。
可以這樣理解background-clip和background-origin，其實(shí)它們并沒有太大的關(guān)系，比如背景允許顯示的范圍是從padding開始，也就是background-clip:padding-box，但背景繪制的起始位置是border開始，也就是background-origin:border-box，那么背景就會(huì)從border位置開始進(jìn)行平鋪，但背景的顯示只會(huì)從padding位置開始，border邊框中的背景就完全遮住(假設(shè)border設(shè)置透明的)，相當(dāng)于被切割掉一部分背景；如果background-clip：content-box，這時(shí)候容器的padding：10px；容器的整體上下左右相當(dāng)于增大了10px,比如盒子content內(nèi)容的寬、高分別是200、150，設(shè)置padding: 10px后，整體就會(huì)看起來是240、190(content部分的寬高還是200、150，但水平、垂直方向存在20px內(nèi)邊距)。
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>background-clip和background-origin的關(guān)系</title><style>.aboutBg {/* background-color默認(rèn)開始位置border-box *//* background-origin默認(rèn)開始位置padding-box *//* background-clip默認(rèn)開始位置是border-box */width: 201px;height: 150px;padding: 10px; /* 添加了padding是給盒子增大的看到的寬高 */border: lightblue dashed 10px;background: url(shop06QZ.png) no-repeat;background-color: pink; background-origin: border-box;background-clip: border-box;/*background-origin: border-box;*//*background-origin: padding-box;*//*background-clip: padding-box;*//*background-clip: content-box;*/}</style></head><body><div class="aboutBg"></div></body> </html>還是今日事今日畢吧，因?yàn)槟悴恢烙惺裁锤杓敝幚淼氖虑槎⒄`你的記錄。
5、background-position
該屬性是用來控制背景圖片在元素中的位置（指定圖片左上角相對(duì)于元素左上角的位置，這個(gè)元素的左上角從哪開始——根據(jù)background-origin），background-origin指定background-position參照點(diǎn)，也就是圖片的左上角相對(duì)元素的左上角是從border、padding或content開始。?
?
?
?
?
?
?
?
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/L-xjco/p/10857187.html
總結(jié)
以上是生活随笔為你收集整理的关于background-*的一些属性的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Genymotion模拟器安装ARM架构
- 下一篇： nginx 篇