background-size筆記

在使用background-size的時候遇到的一點點的疑惑,所以重溫一下background-size的一些用法。

語法:

background-size:auto|length|cover|contain|initial|inherit;
  • 默認值:auto;
  • length(絕對值):設(shè)置背景圖片的寬高。若第一個被設(shè)定了,那么第二個的值為auto;
  • percentage(百分比):相對父元素寬高的百分比來設(shè)置背景圖片的大小。
  • cover:拉伸背景圖片以使背景圖片盡可能的鋪滿背景區(qū)域。致使部分圖片可能不會在背景區(qū)域內(nèi)。
  • contain:縮放圖片使得它的寬高都能被包含在內(nèi)容區(qū)域內(nèi)。
  • initial:初始化
  • inherit: 繼承

總結(jié):

  • background的縮寫:background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

如果同時簡寫bg-position和bg-size的話中間要加斜杠/;若同時使用多個圖片背景,并且需要背景顏色的話,背景顏色屬性需放到最后

  • 百分比設(shè)置是相對于父元素,而不是相對于本身,這個應該注意一下。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容