background-position与background-size


一、background-position

1.关键字定位

  当使用关键字的时候,关键字的顺序是无关的,即background-position: center top 和 background-postion: top center 是等价的。

    

2.百分百比或者具体的长度单位时

设置 background-position 的同时还需要设置 background-size , 将单位都转换为 rem px em, 可以准确的显示出图标,不会出现对不准的情况。

当使用百分百定位时,百分百是相对于它的父元素来说的。

    

3.同时使用座标和关键字

 在新的 CSS 语法中又多了一种用法,这种用法是相对于容器的边,形式如下:

background-position: right 10px top 20px,这种语法表示背景距右边 10px,距上边 20px。

但是,这种写法的兼容性并不好,很多浏览器还不支持。如果不考虑 IE8,可以采用这种方式。如果要考虑 IE8 的话,要么给容器定宽,计算出具体的 x 和 y 的值,要么,使用百分比来大约的定位。

    

二、background-size

这个属性,是用来控制背景图片尺寸的。它也有几种用法:

1. 直接使用css单位如px,rem等,形如:background-size:10px 20px;第一个数值用来确定宽度,第二个值用来确定高度。

2. 使用百分比与使用单位类似,是以父元素为基准。

3. 关键词cover,background-size:cover;顾名思义,这个属性会让背景图片完全覆盖元素空间。我们可以这样理解,将一张图片等比例放大,直到这张图片能够完全将元素空间完全覆盖时,就是此时cover定义的背景尺寸了。

4. 关键词contain,background-size:contain;contain属性与cover不同,仍然是等比例拉大背景图片但是,contain属性是在图片的宽度或者高度其中之一和元素的宽度和高度一致时,此时的尺寸就是背景的尺寸也就是说,图片会被放大到容器能够完全显示它的最大尺寸。



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章