课程名称:十天精通CSS3
课程章节: 与背景相关的样式
主讲老师:大漠
课程内容:
今天学习的内容包括: 如何使用background-origin
?background-clip
的使用?background-size
的使用?background
的使用?
课程收获:
background-origin
用于设置元素背景图片的原始起始位置。使用方法background-origin : border-box | padding-box | content-box;
这些参数分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始显示。我们需要注意的是如果背景不是no-repeat
,这个属性无效,它会从边框开始显示。
background-clip
用来将背景图片做适当的裁剪从而适应实际需要。使用方法background-clip : border-box | padding-box | content-box | no-clip
,这些参数分别表示从边框、或内填充,或者内容区域向外裁剪背景。no-clip
表示不裁切,和参数border-box
显示同样的效果。backgroud-clip
默认值为border-box
。
background-size
表示设置背景图片的大小,以长度值或百分比显示,还可以通过cover
和contain
来对图片进行伸缩。使用方法background-size: auto | <长度值> | <百分比> | cover | contain
,其中默认值是auto
,不改变背景图片的原始高度和宽度;<长度值>是成对出现的,用来将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放;<百分比>
的值是0%~100%之间的任何值,将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值,当设置一个值时同上;cover是将背景图片等比缩放以填满整个容器;contain可以将背景图片等比缩放至某一边紧贴容器边缘为止。
background
的缩写值用逗号隔开,如果有 size
值,需要紧跟 position
并且用 "/"
隔开;当有多个背景图片,而其他属性只有一个,意思就是所有背景图片应用该属性值。background-color
只能设置一个。
今天学习了边框的5-1到5-5的5个小结,花费了50分钟,今天学习了使用background-origin
将元素的背景图片设置到我们想要的位置上,然后通过background-clip
对显示的图片进行裁剪,达到需要显示的效果。使用background-size
来设置图片的大小,不仅可以将图片填充整个容器中还可以让容器包含整个图片。