介紹CSS background屬性的一些用法。
建議使用較新的Chrome瀏覽器閱讀此頁面。
background:<背景塊1>[,<背景塊2>…]
其中寫在最前的背景塊置於頂層，依次向下疊加。
每一個<背景塊>的參數如下：
[color] [image] [<position>[/<size>]] [repeat] [origin] [clip][1]各個參數之間用空格分隔。position和size之間用「/」分隔，如果需要使用size參數必須同時使用position參數。
各個參數都各自的獨立CSS屬性。
獨立屬性：background-color
指定背景塊的顏色，只能使用一個顏色代碼或生成單種顏色的函數。[2]
background:#66CCFF
獨立屬性：background-image
指定背景圖像[3]。也可以使用與顏色相關的CSS函數，但不能使用單種顏色。[2]
background:linear-gradient(#FF7777,#77FF77,#7777FF)
關於CSS漸變色函數的使用，請參閱User:JackBlock/漸變色使用。
獨立屬性：background-position
指定背景塊的起始位置，包含橫縱坐標（坐標原點為繪製區域的左上角，以右方向與下方向為正方向。一般使用以%或px為單位的長度[4]）。如果是絕對長度，則該參數代表背景塊左上角的位置；如果是百分比，則該參數代表該背景塊中對應百分比坐標點的位置。不使用時默認為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
獨立屬性：background-size
指定背景塊的大小，分為橫縱長度（一般可使用以%或px為單位的長度[4]，或者可使用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
獨立屬性：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
獨立屬性：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
| 文字文字文字文字文字文字文字文字文字文字文字文字文字文字 |
獨立屬性：background-clip
指定背景繪製的區域。不使用時默認與origin的值相同，若origin也未指定或者值不可用則默認為border-box。
可選值如下：
padding-box：填充框border-box：邊界框content-box：內容框text：文字，需要把文字本身設為透明才能看見效果，部分瀏覽器不支持直接使用。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(135deg,#FF7777,#77FF77,#7777FF) text
| 文字文字文字文字文字文字文字文字文字文字文字文字文字文字 |
如前所述，背景塊可以疊加多層，可以用於設計複雜的圖案。疊加順序為從上向下疊加（後一層背景在前一層下方）。
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);
| 分層 | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
|
background屬性時，background-color和background-image的作用常被混淆，由於上述特性，在屬性非最後一層出現單個顏色代碼時，可能造成整個屬性無法被解析。
em, ex, %, px, cm, mm, in, pt, pc, ch, rem, vh, vw, vmin, vmax，參見 https://www.runoob.com/cssref/css-units.html