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