使用者:JackBlock/CSS background
介紹CSS background屬性的一些用法。
建議使用較新的Chrome瀏覽器閱讀此頁面。
基礎參數
background:<背景块1>[,<背景块2>…]
其中寫在最前的背景塊置於頂層，依次向下疊加。
每一個<背景块>的參數如下：
[color] [image] [<position>[/<size>]] [repeat] [origin] [clip][1]
各個參數之間用空格分隔。position和size之間用「/」分隔，如果需要使用size參數必須同時使用position參數。
各個參數都各自的獨立CSS屬性。
color
獨立屬性：background-color
指定背景塊的顏色，只能使用一個顏色代碼或生成單種顏色的函數。[2]
- 示例
background:#66CCFF
image
獨立屬性：background-image
指定背景圖像[3]。也可以使用與顏色相關的CSS函數，但不能使用單種顏色。[2]
- 示例
background:linear-gradient(#FF7777,#77FF77,#7777FF)
關於CSS漸變色函數的使用，請參閱User:JackBlock/漸變色使用。
position
獨立屬性：background-position
指定背景塊的起始位置，包含橫縱坐標（坐標原點為繪製區域的左上角，以右方向與下方向為正方向。一般使用以px為單位的長度）。如果是絕對長度，則該參數代表背景塊左上角的位置；如果是百分比，則該參數代表該背景塊中對應百分比坐標點的位置。不使用時默認為0。
- 示例
background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF)
background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) 10px 10px
background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) 10px
background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) -20px 20px
background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) 210px -10px
size
獨立屬性：background-size
指定背景塊的大小，分為橫縱長度（一般可使用百分數或以px為單位的長度，或者可使用auto指定和元素大小相同）。不使用時默認和元素大小相同。
同時在image參數內的長度相關值將以此參數的值為基準。
- 示例
background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) 0 0
background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) 0 0/10px
background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) 0 0/20px 20px
background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) 0 0/20% 10%
background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) 0 0/auto 50px
repeat
獨立屬性：background-repeat
指定背景塊的重複方式。
可選值如下：
repeat：在橫縱方向都重複（不使用時的默認效果）repeat-x：僅橫向重複repeat-y：僅縱向重複no-repeat：不重複
- 示例
background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) 0 0/20px 20px repeat
background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) 0 0/20px 20px repeat-x
background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) 0 0/20px 20px repeat-y
background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) 0 0/20px 20px no-repeat
origin
獨立屬性：background-origin
指定背景繪製時的參考位置。
可選值如下：
padding-box：以填充框為基準（不使用時的默認效果）border-box：以邊界框為基準content-box：以內容框為基準
background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) padding-box
| 文字文字文字文字文字文字文字文字文字文字文字文字文字文字 |
background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) border-box
| 文字文字文字文字文字文字文字文字文字文字文字文字文字文字 |
background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) content-box
| 文字文字文字文字文字文字文字文字文字文字文字文字文字文字 |
clip
獨立屬性：background-clip
指定背景繪製的區域。不使用時默認與origin的值相同，若origin也未指定則默認為border-box。
可選值如下：
padding-box：填充框border-box：邊界框content-box：內容框
background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) padding-box border-box
| 文字文字文字文字文字文字文字文字文字文字文字文字文字文字 |
background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) border-box content-box
| 文字文字文字文字文字文字文字文字文字文字文字文字文字文字 |
background:linear-gradient(135deg,#FF7777,#77FF77,#7777FF) content-box padding-box
| 文字文字文字文字文字文字文字文字文字文字文字文字文字文字 |
多層背景
如前所述，背景塊可以疊加多層，可以用於設計複雜的圖案。疊加順序為從上向下疊加（後一層背景在前一層下方）。
- 示例
background:
linear-gradient(45deg,#E7DDE1 25%,transparent 25%,transparent 75%,#E7DDE1 75%) 0 0/20px 20px,
linear-gradient(135deg,#E7DDE1 25%,transparent 25%,transparent 75%,#E7DDE1 75%) 0 0/20px 20px,
repeating-linear-gradient(to right,#FE6493 0px,#FE6493 20px,#512E53 20px,#512E53 40px);
background:
radial-gradient(circle at 50% 50%,#FFF 4px,transparent 5px,transparent 9px,#FFF 10px) 0px 0px/20px 20px,
linear-gradient(to bottom right,#E9FAF2,#8BCCEA,#8493AA);
background:
conic-gradient(at 0 100%,transparent 18deg,#000 18deg,#000 54deg,transparent 54deg) 42.221px 112.803px/58.779px 69.099px no-repeat,
conic-gradient(at 100% 100%,transparent 306deg,#000 306deg,#000 342deg,transparent 342deg) 101px 112.803px/58.779px 69.099px no-repeat,
conic-gradient(at 0 0,transparent 90deg,#000 90deg,#000 126deg,transparent 126deg) 5.894px 70.098px/72.655px 42.705px no-repeat,
conic-gradient(at 100% 0,transparent 234deg,#000 234deg,#000 270deg,transparent 270deg) 123.451px 70.098px/72.655px 42.705px no-repeat,
conic-gradient(at 50% 0,transparent 162deg,#000 162deg,#000 198deg,transparent 198deg) 78.549px 1px/44.902px 69.098px no-repeat,
radial-gradient(at 101px 101px,#000 38.197px,transparent 38.197px),
#FFF;
| 分層 | |||||||
|---|---|---|---|---|---|---|---|
|
|
background:
linear-gradient(-135deg,#A7BCC6 3.182px,transparent 3.182px) 31px 164px/32px 32px,
linear-gradient(-135deg,#A7BCC6 3.182px,transparent 3.182px) 15px 180px/32px 32px,
linear-gradient(-45deg,#A7BCC6 3.182px,transparent 3.182px) 31px 164px/32px 32px,
linear-gradient(-45deg,#A7BCC6 3.182px,transparent 3.182px) 15px 180px/32px 32px,
linear-gradient(135deg,#A7BCC6 3.182px,transparent 3.182px) 31px 164px/32px 32px,
linear-gradient(135deg,#A7BCC6 3.182px,transparent 3.182px) 15px 180px/32px 32px,
linear-gradient(45deg,#A7BCC6 3.182px,transparent 3.182px) 31px 164px/32px 32px,
linear-gradient(45deg,#A7BCC6 3.182px,transparent 3.182px) 15px 180px/32px 32px,
repeating-linear-gradient(45deg,#D9E3E9 0px,#D9E3E9 4.950px,transparent 4.950px,transparent 22.627px),
repeating-linear-gradient(135deg,#D9E3E9 0px,#D9E3E9 4.950px,#FFFFFF 4.950px,#FFFFFF 22.627px);
| 分層 | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
|