background不要忽略的知識點(background-clip、background-size、background-attachment、background-origin)

1、background-clip

? ? ? 語法:background-clip: border-box|padding-box|content-box;

? ?????background-clip屬性指定背景繪制區(qū)域。

? ??????border-box默認(rèn)值。背景繪制在邊框方框內(nèi)(剪切成邊框方框)。

????????padding-box背景繪制在襯距方框內(nèi)(剪切成襯距方框)。

????????content-box背景繪制在內(nèi)容方框內(nèi)(剪切成內(nèi)容方框)。

2、background-size

語法:background-size:length|percentage|cover|contain;

length設(shè)置背景圖片高度和寬度。第一個值設(shè)置寬度,第二個值設(shè)置的高度。如果只給出一個值,第二個是設(shè)置為?auto(自動)

percentage將計算相對于背景定位區(qū)域的百分比。第一個值設(shè)置寬度,第二個值設(shè)置的高度。如果只給出一個值,第二個是設(shè)置為"auto(自動)"

cover此時會保持圖像的縱橫比并將圖像縮放成將完全覆蓋背景定位區(qū)域的最小大小。

contain此時會保持圖像的縱橫比并將圖像縮放成將適合背景定位區(qū)域的最大大小。

background-size屬性指定背景圖片大小

3、background-attachment

????語法:background-attachment:scroll | fixed | inherit ;

????background-attachment設(shè)置背景圖像是否固定或者隨著頁面的其余部分滾動

????scroll背景圖片隨頁面的其余部分滾動。這是默認(rèn)

????fixed背景圖像是固定的

????inherit指定background-attachment的設(shè)置應(yīng)該從父元素繼承

4、background-origin

語法:background-origin: padding-box|border-box|content-box;

background-Origin屬性指定background-position屬性應(yīng)該是相對位置。

padding-box背景圖像填充框的相對位置

border-box背景圖像邊界框的相對位置

content-box背景圖像的相對位置的內(nèi)容框

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

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

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