解决图片闪烁问题,提高网站的性能,可以使用 雪碧图/精灵图 ,学名:图片整合技术
实现原理:
将多张图片整合在一起,然后一次性引入到网站中,
减少网络请求,以提高网站的性能
实现步骤:
1、先确定好你要使用哪个图片或者图标
2、测量图片的大小 例如:290*300
3、根据测量的结果去建一个盒子,对外展示
4、将图片作为背景图引入到盒子中
5、设置图片的位置,以正确的显示图片
background-position:水平方向 垂直方向值;
水平方向:正值 图片向右,负值 图片向左
垂直方向:正值 图片向下,负值 图片向上
渐变:通过渐变可以设置一些复杂的背景颜色,
可以从实现一个颜色向其他颜色过渡的效果.
渐变是图片,通过 background-image设置
可选值
1:linear-gradient(方位,颜色1,颜色2) ['ɡreidiənt]
线性渐变,颜色沿着一条直线发生变化
参数1:表示方位,(可选值,不写默认是to bottom)
(1)to left,to right, to bottom, to top
<