图片的好看样式HTML,html的背景样式图片

样式HTML,html的背景样式图片"/>

图片的好看样式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

使用三张图片会出现这种情况，

把三种情况的图片放到一个图片里面

background-position:-50px 0;

background-position:-100px 0;

总结 ： 通过一个样式的属性设置

background:#bfa url(img/3.png) center center no-repeat fixed;

内容来源于网络如有侵权请私信删除