css background-position和background-size以及clip属性

今天聊一聊css背景属性的background-position和background-size以及clip三个属性。

background-position：(0%,0%)为默认值
这个属性，看它字面意思就知道啦，用来定位背景显示的位置。既然是定位，天然而然咱们就想到了top和left，
对比于position属性，在这里咱们能够用如下方式来使用background-position：

一、直接使用定位关键词如"right","center","top","left"等，形如background-
position:center left;若是只设置一个值，另外一个值默认为center;

二、使用百分比，形如background-position:10% 20%;第一个值为水平值，第二个为垂直方向值若是只设置
 一个值，另外一个值默认为50%；

三、使用px，em等其余css单位，与百分比使用相似。




background-size:auto为默认值
这个属性，是用来控制背景图片尺寸的。它也有几种用法：

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

二、使用百分比与使用单位相似，是以父元素为基准。

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

四、关键词contain，background-size:contain;contain属性与cover不一样，仍然是等比例拉大背景图片
可是，contain属性是在图片的宽度或者高度其中之一和元素的宽度和高度一致时，此时的尺寸就是背景的尺寸
也就是说，图片会被放大到容器可以彻底显示它的最大尺寸。




最后，咱们来看一个用clip属性搭配js脚本实现的效果：

咱们看到图片中的导航条，文化二字被“切割”了，一部分是黑色，一部分是白色。这是怎么作到的呢？诀窍在于
使用clip属性，clip用来裁剪绝对定位元素，被切掉的部分相似于overflow：hidden，也就是说在页面上是
看不见的。这个效果，其实用了两个同样的导航重叠在一块儿，而后经过js脚本根据滚动来实时设置clip属性的值
nav1裁剪掉下部分，nav2裁剪掉上部分，这样看来就实现了图片的效果。

因为文字描述比较难懂，这里贴出有图中效果的某网址，供各位参考～～
点击这里：http://www.sketchin.ch/en/