背景图片设置

  • 精确控制背景图片在元素中的位置

可以把图片设置为元素的背景,而且也能让它铺满或者不铺满,那么我们同时也能将图片放到一个固定的位置。
需要通过background-position用来精确控制背景 图片在元素中的位置。
通过三种方式来确定图片在水平方向 和垂直方向的起点。

关键字:top right bottom left center
百分比
数值



    
    背景与偏移量
    


    

注意写对图片的路径,不然图片无法显示。
背景图片的固定

通过背景图片的固定,我们也能实现犹如网站的购物车图标,不会随着屏幕的滚动而变化。在设置背景图片的时候,最好是设置在内,这样不会因为其他元素的滚动而消失。
CSS Sprite

CSS Sprites是一种网页图片应用处理方式。
好处:

通过这种方式我们可以将网页中的零星图片集中放到一张大图上,这样只需要网页发送一次请求。
一次请求便可以同时加载多张图片,大大提高了图片的加载效率,提高了访问效率。



    
    按钮
    


    


上面代码中,要么写图片路径在hover 和 acitve中不写位移,那这就是传入三次图片,要么就是不写路径,通过传入一张整合以后的图片,来进行移动,实现我们想要看到的效果。提交加载速度。

你可能感兴趣的:(背景图片设置)