User: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);
| 分层 | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|
|
|