CSS樣式表之background背景

2022-03-18 09:03:12 字數 1149 閱讀 8468

【css常用背景屬性】:

background (縮寫形式)

background-color:背景色

background-image:背景圖  url中放位址,背景圖和背景色同時存在時,背景圖覆蓋背景色

background-repeat:背景圖的重複方式

屬性: no-repeat不平鋪,一般要選擇不平鋪;repeat-x水平平鋪;repeat-y垂直平鋪;repeat平鋪(預設)

background-position:位置座標、偏移量

》指定位置:left、center、reight         top、center、bottom;

當只寫乙個屬性時,另乙個預設居中

》填寫座標:水平位置 垂直位置(畫素/百分比)

當只寫乙個屬性值時,預設寫的是水平方向,另乙個垂直居中

水平方向:正數右移 負數左移

垂直方向:正數下移 負數上移

使用百分比時,代表去掉後,剩餘空白區域距離比例

background-clip:裁切背景圖和背景色顯示區域。

border-box從邊框外邊緣開始顯示;

padding-box從邊框內邊緣開始顯示;

content-box從文字內容區開始顯示;不在顯示區域的背景圖或背景色,會被裁切不顯示

不改變定位位置,只是通過裁切顯示部分區域

background-origin:設定背景圖的定位方式。

border-box從邊框外邊緣開始;

padding-box從邊框內邊緣開始;

content-box從文字內容區開始

不改變背景圖顯示區域大小,只決定左上角定位位置

background-size:寬 高

【指定寬高】①直接寫畫素 ②百分比

》當只有乙個屬性值時,預設為寬度、高度等比縮放

當有兩個屬性時,會按照指定的高度寬度進行壓縮/拉伸處理

【其他屬性值】

》contain:等比縮放,縮放到寬或高的某一邊等於父容器為止,另一邊按比例縮放(可能導致部分空餘區域無法覆蓋)

》cover:等比縮放,使背景圖完全覆蓋背景區域(可能導致背景圖部分區域無法顯示)

什麼能堅持堅持堅持堅持堅持堅持堅持幾年男方女方你快點快點**費能否

CSS層疊樣式表 定義樣式表

定義樣式表 1 html標記定義 p p可以叫做選擇器,定義那個標記中的內容執行其中的樣式 乙個選擇器可以控制若干個樣式屬性,他們之間需要用英語 隔開,最後乙個可以不應加 2 class定義 class定義是以 開始 p3 id 定義 id定義是 開始的 p4 優先順序問題 id class htm...

css筆記之引入css樣式表

css cascading style sheets css通常稱為css樣式表或層疊樣式表 級聯樣式表 主要用於設定html頁面中的文字內容 字型 大小 對齊方式等 的外形 寬高 邊框樣式 邊距等 以及版面的布局等外觀顯示樣式。css以html為基礎,提供了豐富的功能,如字型 顏色 背景的控制及整...

CSS學習之樣式表引入

style height 100px weight 50px x p 注意點 內聯樣式只能包含乙個宣告塊,不能放樣式表 import 完整的規則。type text css media print,screen color red font size 100px style 注意點 1.可以設定me...