最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

CSS background系列属性

XAMPP下载 admin 847浏览 0评论

一、元素背景是指哪些区域

默认情况下元素的背景是指元素border(包含border)以内的区域。

QQ截图20181208163407

 在CSS3中可用使用background-clip改变元素背景区域。

1.1 background-clip
指定背景在被应用元素上的绘制区域。元素盒模型包含content, padding, border, margin。默认背景绘制的区域包含:content+padding+border,不包含margin区域。通过该属性可以控制绘制的区域。

background-clip: border-box|padding-box|content-box|initial|inherit|text;
其中取值text比较吊炸天,即背景只显示在文本区域,可以实现美轮美奂的文字啦。

该属性颜可以影响颜色类型和图片类型的背景;
背景只能在可绘制区域里绘制,其他区域如margin区域是不会绘制的。
二、背景颜色
2.1 background-color
指定背景的颜色

只能设置一个颜色值,特殊的颜色值:transparent,也是默认值;
通过background-clip属性可以控制background-color的应用范围;
background-clip属性要先背景颜色属性时,否则该background-clip属性无效(背景图片就没有这个问题)。
三、背景图片
3.1 指定背景图片
1)background-image
给元素指定一个或多个图片类型的背景(而只能指定一种背景颜色)。CSS3可以指定多个背景图片了。多个图片之间用逗号隔开,其他相关的属性可以做作用于多个背景图片上,也是用逗号隔开。

多个背景图片之间的显示互相独立,各不影响;
可以同时指定背景图片和背景颜色;
背景图片本身是有自身尺寸的(background-size),被应用元素也有自己的尺寸。被应用元素没有被背景图片覆盖的区域则会通过重复绘制背景图片(当然了可以通过CSS属性修改默认的方式)的方式进行覆盖整个绘制区域。
3.2 背景图片相关的属性
背景图片本身是有自身尺寸的(background-size),被应用元素也有自己的尺寸。可以对背景图片进行更复杂的操作。

1)background-origin
原点(origin)是指背景图片开始绘制起始点,默认情况下原点在被应用元素的padding区域的左上角位置。通过background-origin属性可以修改原点位置。以原点向右有X坐标轴正方向,向下为Y坐标轴正方向,背景图片就按照这个坐标系统开始重复绘制背景图片。坐标系的反方向都是重复方式绘制。

background-origin: padding-box|border-box|content-box|initial|inherit;
原点的坐标系是个矩形区域;
可能我们会想当然的认为背景的绘制区域(backgroud-clip)的左上角就是背景图片绘制的原点,但实际却不是这样的,他们俩没有必然的关系:
首先原点和绘制区域的默认值是不一样的
甚至原点可能在绘制区域的外面
2) background-position
背景图片的左上角称为背景图片的位置。该位置是相对于原点构建的坐标系,默认情况下该位置就是在原点。通过background-position可以指定图片相对于原点移动的位置(也可以认为移动背景图片到指定的位置)。

background-position-x: xpos | inherit | initail;
background-position-y: ypos | inherit | initail;
// 简写形式
background-position: xpos [ypos] | inherit | initail;
xpos取值:

绝对值:图片左上角相对于原点X轴方向移动距离;
百分比:计算方式比较奇葩。
如background-position-x: 10%并不是表示图片左上角相对于原点X轴方向移动10%,而是表示背景图片X轴方向10%的位置(基于图片Size计算)和原点坐标X轴方向10%的位置(基于原点矩形宽度计算)对齐。计算方式有点绕,主要目的是通过这种计算方式可以很容易实现背景图片的对齐:如0%即表示左对齐,50%表示居中,100%表示右对齐。
关键词left: 表示图片的左侧跟原点矩形左边对齐,相当于0%,0
关键词center:表示背景图片在原点矩形中左右居中,相当于50%
关键词right:表示图片的右侧和原点矩形的右侧对齐,相当于100%
ypos取值:

绝对值:相对于原点Y轴方向距离
百分比:类似xpos取值百分比
关键词top:表示图片的上边和原点矩形上边对齐,相当于0%, 0
关键词center:表示背景图片在原点矩形上下居中,相当于50%
关键词bottom:表示背景图片的底部和原点矩形的底边对齐,相当于100%
总结一下就是:绝对值用来控制图片移动距离,百分比值控制图片对齐方式,关键词值是对齐方式的简写形式。
3)background-repeat
一方面背景图片可能比背景区域小, 另一方面背景图是从origin位置开始绘制的,部分背景区域可能在原点坐标系的负方向。对那些没有被背景图片覆盖的区域,浏览器默认会通过从左到右,从上到下的方向进行重复绘制背景图片,原点的负方向也是按照这个方式重叠绘制。通过background-repeat属性可以控制是否重复以及怎么执行重复绘制背景图片。

background-repeat: repeat | repeat-x | repeat-y | space | round | initital | inherit
repeat-x, repeat-y, repeat
是浏览器默认的行为:从上到下,从左到右,背景图片可能会发生剪切
space
space让背景图片在不发生剪切的情况下尽可能多的重复,如果有多余的空隙,则均分在各个背景图片之间。
注意space只是保证原点矩形内背景图片不发生剪切,对于那些不在原点矩形外的背景区域还是通过剪切的方式进行重复
round
round跟space类似,但是如果有多余的空隙则背景图片通过缩放的方式侵占空隙。
拉伸:多余的空间小于背景图片一半
压缩:多余的空间大于背景图片的一半
注意round跟space类似,round也只是保证原点矩形内背景图片不发生剪切,对于那些不在原点矩形外的背景区域还是通过剪切的方式进行重复。
4)background-size
背景图片可能具有原始的尺寸,可以通过background-size指定背景图片的大小,进而可以对背景图片进行缩放操作。

background-size: auto | width [height] | cover | contain | initail | inherit
auto表示使用图片的本身的尺寸;
width [height] 指定具体的长度,

绝对值
指定具体的值
百分比
相对于原点矩形的尺寸计算
cover
首先保证背景图片平铺整个绘制区域,如果背景图片小,则通过等比例方式拉伸
contain
首先保证背景图片完整显示背景图片,如果背景图片大,则通过等比例方式缩小
5) background-blend-mode
指定多个背景图片混合模式

6) background-attachment
指定背景图片的固定方式。

background-attachment: scroll|fixed|local|initial|inherit;
scroll: 表示背景图片相对于元素本身固定,即它会随着被应用元素的滚动而滚动;
fixed: 表示背景图片相对于元素的视口固定,即它不会随着被应用元素的滚动而滚动;
local: 表示背景图相对于应用元素的内容而固定,即如果被应用元素的内容有滚动,则其会随着被应用元素的内容滚动而滚动(注意和fixed区别)。
7) background
简写格式

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;
额,好长,记不清的话还不如使用具体的backgroud属性。方便的记忆法:

先确定背景类型
如果是图片,则确定图片的属性(位置,大小,重复方式,绘制起始点)
确定绘制区域
背景图片固定方式
四、总结
绘制元素背景的条件:

首先要确定背景区域;
确定背景类型:颜色、图片;
如果是图片还可以更细致的控制。
除了background-clip可以应用于background-color其他属性都是用于background-image的;
如果background-clip取值为border-box,则border会覆盖在background上面,即border的颜色或者图片会覆盖背景颜色或者图片。

转载请注明:XAMPP中文组官网 » CSS background系列属性

您必须 登录 才能发表评论!