取值
- background-color 背景颜色
- background-image 背景图像
- background-repeat 背景图像如何铺排填充
- background-attachment
- background-position
- background-size
- background-origin
- background-clip
简写顺序
background:color img_url repeat attachment position / size
background-color
取值
[<color>]:指定颜色。
说明
当同时定义了背景颜色和背景图像时,背景图像覆盖在背景颜色之上。
如果设置了 <' [background-image]'>,同时也建议设置 <' background-color '> 用于当背景图像不可见时保持与文本颜色有一定的对比度。
background-image
取值
- none:无图像
- <image>:使用绝对或相对地址或者创建渐变色来确定图像。
渐变色背景
渐变种类有: linear-gradient, radial-gradient, repeating-linear-gradient, repeating-radial-gradient
background: -webkit-radial-gradient(center, ellipse, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, transparent 80%);
多重背景
padding-bottom: 200px;
background-color: #0a8;
background-image:
url(http://img.benmuhealth.com/wechatV2-mina/Duty-check.png),
url(http://img.benmu-health.com/wechatV2-mina/Female-head.png),
url(http://img.benmu-health.com/wechatV2-mina/Male-head.png);
background-repeat: no-repeat;
background-position: 0 0,
100px 0,
200px 0;
background-size: 100px;
background-repeat
取值
repeat-x:背景图像在横向上平铺
repeat-y:背景图像在纵向上平铺
repeat:背景图像在横向和纵向平铺
no-repeat:背景图像不平铺
round:背景图像自动缩放直到适应且填充满整个容器。(CSS3)
space:背景图像以相同的间距平铺且填充满整个容器或某个方向。(CSS3)
说明
允许提供2个参数,如果提供全部2个参数,第1个用于横向,第二个用于纵向。
如果只提供1个参数,则用于横向和纵向。特殊值repeat-x和repeat-y除外,因为repeat-x相当于repeat no-repeat,repeat-y相当于no-repeat repeat,即其实repeat-x和repeat-y等价于提供了2个参数值
background-attachment 背景关联
如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。
可以通过
background-attachment:fixed防止这种滚动。可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响:
取值
- scroll: 默认 背景随屏滚动
- fixed: 背景不随屏滚
- inherit 继承自父
background-position
定位背景图像
提示:需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。
值 | 描述 |
---|---|
top left top center top right center left center center center right bottom left bottom center bottom right |
如仅规定了一个关键词,那么第二个值将是"center"。 |
默认值:0% 0%。 | x% y% 第一个值是水平位置,第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如仅规定了一个值,另一个值将是 50%。 |
xpos ypos | 第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如仅规定了一个值,另一个值将是50%。 可以混合使用 % 和 position 值。 |
background-size
规定背景图片的尺寸
能够以像素或百分比规定尺寸。
以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度
background-origin
background-origin 属性规定 background-position 属性相对于什么位置来定位。
注释:如果背景图像的 background-attachment 属性为 "fixed",则该属性没有效果。
背景图片可以放置于 content-box、padding-box 或 border-box 区域。
语法
background-origin: padding-box|border-box|content-box;
值 | 描述 |
---|---|
padding-box | 背景图像相对于内边距框来定位。 |
border-box | 背景图像相对于边框盒来定位。 |
content-box | 背景图像相对于内容框来定位。 |
background-clip
规定背景的绘制区域
语法
background-clip: border-box|padding-box|content-box;
值 | 描述 |
---|---|
border-box | 背景被裁剪到边框盒。 |
padding-box | 背景被裁剪到内边距框。 |
content-box | 背景被裁剪到内容框。 |