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,那么要怎么实现就应该懂了吧,嘿嘿