在使用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è)置是相對于父元素,而不是相對于本身,這個應該注意一下。