亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定

背景圖不裁切時效果不是應該和padding-box一樣嗎?怎么和border-box一樣了?

背景圖的默認起始位置為padding-box,即background-origin:padding-box,在沒有規定背景圖起始位置時,背景圖是不會延伸到邊框區域的(已經測試過背景色才會延伸到邊框區域),那么,沒有對背景圖裁切時,背景圖不是應該和padding-box一樣么?

正在回答

4 回答

根據我的測試,background-clip這個屬性是受到background-origin的限制。即background-clip默認值等同于background-origin設置的值。

1,設置background-origin:border-box;則background-clip默認是border-box,可選padding-box和content-box。

2,設置background-origin:padding-box;則background-clip默認是padding-box,可選content-box,選擇border-box時與padding-box展示效果相同。

3,設置background-origin:content-box;則background-clip默認是content-box,這個時候實質上background-clip屬性已經失去作用了,選擇border-box,padding-box,content-box展示效果是一樣的。

你的那個圖片中沒設置background-origin屬性,在瀏覽器Computed里面應該可以看到計算后的background-origin樣式是padding-box,所以background-clip設置border-box與padding-box效果一樣

1 回復 有任何疑惑可以回復我~
#1

qincai 提問者

非常感謝!
2017-10-02 回復 有任何疑惑可以回復我~
#2

慕運維603224 回復 qincai 提問者

經過我的測試,層主說的并不對呀。結果顯示background-clip默認值就是border-box,跟background-origin無關。而且background-origin只對背景圖片起作用,背景顏色是始終從邊框開始填充的。background-clip既可以裁剪背景圖片也可以裁剪背景顏色。
2017-11-10 回復 有任何疑惑可以回復我~

說實話,一點都看不懂

0 回復 有任何疑惑可以回復我~

http://img1.sycdn.imooc.com//59c3dc710001d46011520545.jpg

當背景是圖片時,在控制臺里設置background-clip為border-box、padding-box時的效果一樣

0 回復 有任何疑惑可以回復我~
#1

奮斗的小菇涼

因為你的只設置了一個div,只設置了父類,沒有子類,所以你的內容就是那個大的div里面的區域
2018-07-08 回復 有任何疑惑可以回復我~

你有代碼么,首先檢查下你的no-repeat是否存在。如果存在再檢查別的代碼是否有錯。否則默認的是從padding-box開始的

0 回復 有任何疑惑可以回復我~
#1

qincai 提問者

我就是說背景圖的默認從padding-box開始,但是這個教程五章第二節說默認從border-box開始
2017-09-21 回復 有任何疑惑可以回復我~

舉報

0/150
提交
取消

背景圖不裁切時效果不是應該和padding-box一樣嗎?怎么和border-box一樣了?

我要回答 關注問題
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號