background新增屬性

2022-07-06 18:21:13 字數 832 閱讀 8676

今天解除了幾個曾經沒有用到的屬性,所以想總結並且複習一下。

background-origin屬性:有三個屬性值,分別是border-box,padding-box,content-box。看到border-box是不是聯想到了css3中的盒子模型。

box-sizing:border-box。它是為了減少css中的盒模型padding和border值計算的繁瑣。

首先先說一下:

background-origin屬性:它表示 background-position 屬性相對於什麼位置來定位。

屬性值border-box:背景影象相對於邊框盒來定位。

屬性值padding-box:背景影象相對於內邊距框來定位。

屬性值

content-box:背景影象相對於內容框來定位。

所以我們一般用這個屬性做一些精靈圖的定位與剪下。

還需要了解的是 background-clip屬性:同樣也有三個屬性值border-box,padding-box,content-box。

background-clip屬性規定背景的繪製區域。值描述

border-box

背景被裁剪到邊框盒。

padding-box

背景被裁剪到內邊距框。

content-box

背景被裁剪到內容框。

CSS3 background新增屬性用法

1.background屬性列表 background color background position background size background repeat background origin background clip background attachment backgr...

background簡寫屬性

在css中有多個屬性用於設定背景樣式,其中 background color 設定背景顏色。background repeat 設定是否以及如何重複背景影象 background position 設定背景影象的起始位置 background attachment 設定背景影象是否固定或者隨著頁面的...

background相關屬性

background origin 規定 background position 屬性相對於容器的哪一部分來定位。padding box 背景影象相對於內邊距框來定位 預設 border box背景影象相對於邊框盒來定位 content box背景影象相對於內容框來定位。background pos...