关于图片大小超过div盒子的讨论——补充

1.先给大家推荐一个很好的学校网站吧，相信很多同学也是知道的w3school!很好的一个学习网站

2.背景图像background（不常用）

我们可以为我们的盒子定义一张图片作为背景，但是我们一般不会将图片作为网页的背景，而是在需要将这张图片整个显示出来才会使用，或者显示这张图片的一部分

1.background：url(背景图像的位置)；

		background-image：url(背景图像的位置)这样写也没错

2.背景图像的重复方式background-repeat

默认值repeat，禁止重复no-repeat,允许x轴重复repeat-x,允许y轴重复repeat-y,

<div id="photo"></div>

#photo{
			width: 600px;
			height: 400px;
			background-image: url(./image/PhoneIco.png);
		}

可以看到我们并未设置background-repeat，但是我们的图像重复了
现在我们对background-repeat进行修改

		#photo{
			width: 600px;
			height: 400px;
			background-image: url(./image/PhoneIco.png);
			background-repeat: no-repeat;
		}

可以看到多余的图像消失了，不再重复显示
另外两个属性repeat-x,repeat-y就不过多赘述了，很好理解可以自己敲一下

3.背景图像的位置background-position

3种定义方法
1.top上，bottom下，left左，right右，center中
两两组合，当只定义了一个属性值时那么第二个值将是"center"
我们随便尝试一组，其他大家自己尝试啦

background-repeat: no-repeat;
background-position: left center;

可以看到图像跑到了我们盒子的左，中
2.百分比定义法，这个适用性比较强
第一个值是水平位置，第二个值是垂直位置。
左上角是 0% 0%。右下角是 100% 100%。
仅规定了一个值，另一个值将是 50%。
为了便于区分我们对盒子加入边框

background-repeat: no-repeat;
background-position: 20% 60%;
border: 1px solid #111;

3.最后一种最常见就是像素值
第一个值是水平位置，第二个值是垂直位置。
左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。
如果您仅规定了一个值，另一个值将是50%。
您可以混合使用 % 和 position 值。
我们随便尝试一下

background-position: 400px 10px;
border: 1px solid #111;

另外像素值可以为负吗？大家可以试试

4.背景图像的依附方式background-attachment

scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时，背景图像不会移动。
！！！这个就不做过多赘述了，大家尝试一下自然懂得，把盒子高度设高一点，超过浏览器好滚一点。

3.解决之前留下的问题

#photo{
			width: 1200px;
			height: 550px;
			background-image: url(./image/mi4.jpg);
			background-repeat: no-repeat;
			background-position: -500px -10px;
			border: 1px solid #111;
		}

没错就是要把x轴y轴设为负数，由于我们的宽比较大要隐藏的比较多，我们就把盒子的左上角看成（0，0）

4.拓展

问题就讲完了，接下来说点好玩的东西

精灵效果1

引入：background：url() no-repeat 100px 20px;
这种写法即是在background后罗列它的属性赋值，是没有问题的，这样写也比较方便，省时省力

我们要实现这种效果
：hover 设置对象在其鼠标悬停时的样式表属性
：active 设置对象在被用户激活（在鼠标点击与释放之间发生的事件）时的样式表属性（这个不用可以当作了解）

<a href="#"></a>

a{
			width: 55px;
			height: 54px;
			display: block;
     		background: url(./image/toolbar_cart.png);
     	}
     	a:hover{
     		background: url(./image/toolbar_cart_focus.png);
     	}

a标签定义的宽度和高度是我们图片的宽度和高度，toolbar_cart.png是原始黑色，toolbar_cart_focus.png悬停绿色，还是比较简单
注解：display: block;这个是把咱们a标签由一个内联元素变成块状元素（就像div）这个后面有机会写一篇单独解释

精灵效果2

我们难度升级，背景（一般我们拿到的图片都是如下一整块的图）

这时候我们还是要实现刚才的效果，比较新手的想法当然是截成两段之后继续上面操作就好，但是很显然这不行，一张两张很容易，如果给的图很多块，一个一个去剪切，去命名去调用很难受，所以
我们学以致用，就用刚学的知识解决它，关键点在于
1.我们初始想要显示的只有黑色小车，绿色小车要隐藏掉
2.鼠标悬停时绿色小车要替代黑色小车的位置，也可以这样理解，黑色小车隐藏，绿色小车移动到黑色小车位置
可以看到关键在于隐藏和移动那么怎么隐藏呢，当然是————负值
由于我们的图片初始只需要上半部分，所以我们完全可以将a标签的高定义为这张图高的一半，我们这张图高是108，所以我们只要把a标签高设为54，那么多余的绿色小车部分超出了盒子的范围自然也就没了，也就是隐藏了

a{
			width: 55px;
			height: 54px;
			display: block;
			border: 1px solid #111;
     		background: url(./image/b.jpg);
     	}

然后我们尝试让绿车车上来，为了便于理解，我们将盒子放大一点，设置repeat不让图像重复

a{
			width: 200px;
			height: 200px;
			display: block;
			border: 1px solid #111;
     		background: url(./image/b.jpg);
     		margin:100px;
     		background-repeat:no-repeat; 
     	}
     	a:hover{
     		background: url(./image/b.jpg)50px 50px;
     		background-repeat:no-repeat; 
     	}

我们观察background: url(./image/b.jpg)50px 50px;设置的50px,50px产生了什么效果
明显的xy坐标分别增加了50px，那么要怎么实现就应该懂了吧，嘿嘿

5.写在最后

大家，一起学习，一起进步，加油。