背景

2018-10-23  本文已影响0人  儿懵

背景:

图片做背景,background-image:url(img/**.ipg 相对路径);
背景图片小于块大小 将会平铺
background-repeat:no-repeat 不重复 只有一个
background-repeat:repeat-x|y 一横排 一竖排

背景的偏移与颜色:

background-image:url(img/**.ipg)
background-repeat:no-repeat 不重复 只有一个
background-position 背景图片的开始 默认都是0% 0%
background-position:top left上左 bottom left下左 center left 中左
只写一个值 后边的默认center中
xpos ypos 第一个水平 第二个垂直
background-position:100xpos 200pz 水平100 垂直200
可以是负值 往相反方向走

设置给body 不要设置其他元素
height:5000px;
background-image:url(img/**.img)
background-repeat:no-rep
background-attachment:fixed 固定 定位默认随着页面滚动

超链接按钮

.abc{
display:block; 转成块儿元素
width:超链接图片宽;
height:链接图片高;
background-url(img/**.jpg)
background-repeat:no-repeat
}
.abc:hover{
background-image:url(img/hover.jpg)
} 鼠标移入的状态
.abc:active{
background-image:url(img/active.jpg)
}鼠标点击的状态
服务器请求会有缓冲

图片放到一起
用这个来切换 精灵图 雪碧图
把多个图片 整合 只像服务器发送一次请求
background-position:-93px 0px

作业

2018-10-23 18-53-38屏幕截图.png
上一篇下一篇

猜你喜欢

热点阅读