background 顾名思义就是背景。
HTML里,可以是所有元素的背景。
那下面看看有哪些背景属性。到目前(公元2016年1月20日)为止的背景属性如下:
background-color //给背景设置颜色 background-image //给背景设置图片 background-position //设置背景图片的坐标 background-repeat //设置背景图片的平铺方式 background-attachment //设置背景图片的附着方式 background-size //设置背景图片的尺寸 background-origin //规定 background-position 属性相对于什么位置来定位 background-clip //指定背景绘图区域 background //可以把很多背景的属性缩写到一起
下面咱们来一一分解。
background-color
颜色么,只要设置颜色就行,管它是什么颜色值,只要是html支持的颜色值都可以。
对于透明的颜色,我们可以使用rgba颜色设置背景颜色的透明。
也可以:
background-color:transparent
background-image
就是设置背景图片喽。可以设置1个,也可以设置N个。
用法:
background-image:url(),url(),url()…
url()括号里头就是图片路径。比如:background-image:url(images/bg.jpg)
那这么多背景图片怎么控制?不要着急,先这么讲吧,没有设置坐标的情况下,所有背景都是左上角对齐罗列的。想要设置坐标,请看下面的background-position。
background-position
它是用来设置背景图像的起始位置。(注:在某些浏览器上使用该属性,background-attachment必须设置为 “fixed(固定)”。发现不能定位的时候希望能想起这个注意事项。)
用法:
background-position:[水平坐标][垂直坐标];
举例:
background-position:10px 20px //让背景图片相对于容器的左上角向右移动10px,向下移动20px
如果想让背景图片相对于容器的右下角开始铺设怎么弄?那水平方向就是从右面开始了,使用right。垂直方向就是底部开始,bottom。
background-position:right bottom
还有就是,上面background-image有多个图片时他们的位置怎么定?
background-position:[水平坐标][垂直坐标],[水平坐标][垂直坐标],[水平坐标][垂直坐标]…
顺序跟背景图片的顺序是一样的。
就这样。
举一个完整的例子。
如果是两个图片作为背景。一个在左上角,一个在右下角:
background-image:url(1.jpg),url(2.jpg); background-position:0 0,right bottom;
就这样,记得中间是半角逗号哦。
background-repeat
背景图片的平铺方式。
background-repeat:repeat-y //纵向平铺 background-repeat:repeat-x //横向平铺 background-repeat:repeat //双向平铺 background-repeat:no-repeat //不平铺
如果是多个背景图片呢。做法跟background-position一样,顺序排列属性值,用半角逗号分开。
background-attachment
设置背景图像是否固定或者随着页面的其余部分滚动。
scroll 背景图片随页面的其余部分滚动,这是默认值。
fixed 背景图像固定,不随页面滚动。
支持多背景图的设置。顺序排列属性值,用半角逗号分开。
background-size
用来规定背景图片尺寸。
例如:background-size:10px 30px //背景图片宽度10px,高度30px。
然后还有几个特殊的属性,非常有利于图片的排布。
cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小,图片会被裁剪,容器内没有余白。
contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小,图片全部显示,容器内有余白。
支持多背景图的设置。顺序排列属性值,用半角逗号分开。
background-origin
该属性指定background-position属性相对于什么位置来定位。
(注:如果背景图像background-attachment是”fixed(固定)”,这个属性没有任何效果。)
padding-box 背景图像包含padding的相对位置,不包括边框。
border-box 背景图像包含边框的相对位置,即最外侧。
content-box 背景包含主题内容区域的相对位置。
支持多背景图的设置。顺序排列属性值,用半角逗号分开。
background-clip
该属性指定背景绘制区域。
有三个值:
padding-box 背景图像填充至内边距,不会超过边框border。
border-box 背景图像填充至border,如果border比较粗,背景图会被border盖掉一部分。
content-box 背景图像填充内容部分。不包括padding和border。
支持多背景图的设置。顺序排列属性值,用半角逗号分开。
background
background: color image position/size repeat origin clip attachment initial或inherit;
举例:
background: rgba(0,0,0,.8) url(../images/bg.jpg) center top/cover no-repeat border-box content-box inherit;
注意,如果有background-size属性,那么简写的时候前面一定要有斜杠/。另外最后面设置了inherit,则继承在前面没有设置的父级属性。
当然简写不一定要全部写。
如果只想写颜色:
background:white
就可以。
如果设置背景颜色,其它继承父级:
background:white inherit
相关英语
background = 背景
position = 位置,方位
repeat = 重复
attachment = 附着,附件
size = 尺寸
origin = 原点,起点,起源
clip = 修剪,裁剪,剪辑
box = 盒
content = 内容,容量
initial = 初始,最初的
inherit = 继承
评论区
发表新的留言
您可以留言提出您的疑问或建议。
您的留言得到回复时,会通过您填写的邮箱提醒您。