图⽚的好看样式HTML,html的背景样式图⽚背景图⽚ 如果背景图⽚⼩于当前的div的情况下
默认的是将平铺充满元素
background-image 设置背景图⽚。
background-repeat 设置是否及如何重复背景图⽚。
repeat 默认的是都重复
repeat-x 背景图像在⽔平⽅向重复
repeat-y 背景图⽚在垂直⽅向重复
no-repeat 背景图⽚仅仅显⽰⼀次。
background-position 设置背景图像的开始位置。
可能的值为： top left              x%  y% 设置背景图⽚的在元素中的位置
top  center
top  right
center left
center center
center right
bottom left
bottom center
bottom right
该属性 可以使⽤  top center bottom left right  中的两个值指定背景图⽚的位置。
⼀个值 默认第⼆个值为center
background-position:100px 100px;
background-attachment: 设置背景图⽚是否固定或者随着页⾯的其余部分滚动。
scroll 默认值。背景图⽚会随着页⾯其余部分的滚动⽽滚动。
fixed 当页⾯的其余部分滚动时，背景图像不会滚动。
当背景图⽚的background-attachment 为 fixed  背景图⽚的定位永远相当于浏览器的窗⼝
多个图⽚进⾏加载的时候，最好通过ps放到同⼀张图⽚中
做完功能后，第⼀次切换图⽚时，会发现图⽚有个快的闪烁
这个闪烁造成⼀次不佳的⽤户体验。
产⽣问题的原因。
背景图⽚是以外部资源的形式加载进⽹页的，浏览器每加载⼀个外部资源
就需要单独的发送⼀次请求。外部资源不是同时记载的。当资源使⽤的时候
才会去加载资源。
.btn:link{
display:block;
width:93px;
height:29px;
background-image:url(img/btn/link.png);
/*设置背景图⽚不重复*/
background-repeat:not-repeat;
}
.btn:hover{
background-image:url(img/btn/hover.png);
}
.btn.active{
background-image:url(img/btn/active.png);
}
为了解决这个问题，整合为⼀张图⽚，可以同时将三张图⽚⼀起加载，就不会出现闪烁的问题。然后通过background-position：切换要显⽰切换图⽚的位置;
图⽚整合技术  CSS-Sprite
使⽤三张图⽚会出现这种情况，
html图片展示特效把三种情况的图⽚放到⼀个图⽚⾥⾯
background-position:-50px 0;
background-position:-100px 0;
总结 ： 通过⼀个样式的属性设置
background:#bfa url(img/3.png) center center no-repeat fixed;
内容来源于⽹络如有侵权请私信删除

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。