CSS2背景屬性

2021-08-01 19:47:04 字數 1588 閱讀 7873

background:

用於設定background-color,background-image,background-repeat,background-attachemnt,background-position屬性

background-color:背景顏色

屬性:

取值:red | #ff0000 | rgb(255,0,0) | transparent

解釋:顏色名 | #ff0000 | rgb(255,0,0) | 透明(預設)

屬性:

取值:url(/images/foo.gif)|0px 0px |

解釋:位址|上和左邊距,要想寫右和下,right和bpttom

background-repeat:背景平鋪

屬性:

取值:repeat | repeat-x | repeat-y | no-repeat

解釋:水平方向垂直方向重複(預設) | 水平方向重複 | 垂直方向重複 | 不重複只顯示一次

background-attachemnt:背景影象是否和物件一起滾動

屬性:

取值:fixed | scroll

解釋:固定不動 | 背景圖案跟著移動

background-position:背景影象位置

屬性:

取值:0% 0% |100% 100%  | top left | top center| top right | center left |center center|center right|bottom left| bottom center|bottom right|

解釋:左上角(預設)|右下角  | 左上角 | 中間靠上| 右上角 | 左中部 |正中|右中部|左下角| 底部中間|右下角

color:文字顏色

屬性:

取值:red | #ff0000 | rgb(255,0,0)

解釋:顏色名 | #ff0000 | rgb(255,0,0)

background-origin: 背景影象定位

如果背景影象的 background-attachment 屬性為 "fixed",則該屬性沒有效果。

屬性:

取值:padding-box | border-box | content-box

解釋:背景影象相對於內邊距框來定位| 背景影象相對於邊框盒來定位 | 背景影象相對於內容框來定位

屬性:

取值:20 20 | 20% 20%  | cover | contain

解釋: 固定數值 | 佔父層的百分比例  | 背景影象完全覆蓋背景區域 |最大的尺寸,寬度高度完全適應內容區

background-clip:規定背景的剪裁區域

屬性:

取值:border-box  | padding-box  | content-box

解釋:背景被裁剪到邊框  | 背景被裁剪到內邊距,留白  | 背景被裁剪到內容

前端 CSS2常用屬性

font weight font size font family line height font variant font direction 設定文字方向。vertical align 設定元素的垂直對齊 text align 對齊元素中的文字 text decoration 向文字新增修飾 ...

CSS背景屬性(2)

背景位置屬性 background position 為了提高http的請求速度,有時候很多都做到一張裡面,這時候就需要切圖,就用到了background position屬性。這個屬性和background image屬性連在一起使用,決定了背景的最初位置。設定或檢索物件的背景影象位置。必須先指定...

CSS2中display table屬性的用法詳解

想必大家都已經知道了css屬性display的一些常見屬性值,比如none,block,inline block等等,今日我在看乙個效果 的時候,碰到乙個之前從未使用過的屬性值,就是它了,display table。隨後從網上以及手冊中搜尋了一下它的具體用法,在此總結下來分享給大家,希望能對大家有所...