!!浏览器编译网站是有顺序,显示html结构,然后再加载外部资源;例如css文件,图片,数据请求
背景图片是以外部资源的形式加载进网页的
浏览器每加载一个外部资源就需要一个单独的请求,但是我们外部资源并不是同时加载,浏览器会在资源!!
一、雪碧图/精灵图(图片整合技术)
解决图片闪烁的问题,提高网站的性能,可以使用雪碧图
实现原理:将多张图片整合在一起,然后一次性引入到网站中,减少网站请求,以提高网站性能
实现步骤:
1、先确定好使用哪个图片或图标
2、测量图片的大小
3、根据测量的结果区建一个盒子对外展示
4、将图片作为背景图引入到盒子中
5、设置图片的位置,以正确的显示图片(移动整个图片,在窗口显示各个部分)
background-position:水平 垂直;
!!!面试题:请你从提高网站性能上,提出建议(精灵图的使用)!!!
二、渐变
渐变色:从一个颜色向另一个颜色过度;不是单纯的背景色,可以看出是一个图片
background-img:;
可选值:
1、linear-gradient线性渐变(参数逗号隔开)
参数:
(1)参数1方向:
~to left 向左渐变 to right 向右渐变
~度数xxdeg 表示角度,度数,会更灵活,正值顺时针,负值逆时针
~turn 表示圈,1turn表示360度
(2)参数2直接放颜色(可选多个颜色):red,yellow
注意:
~可以写多个颜色,默认情况下,颜色是均分的;也可以手动设置占比多少(在颜色后面写百分比或者大小px)
2、repeat-linear-gradient重复的线性渐变(和上面使用方法一样)
3、radial-gradient放射性渐变
圆心的形状,默认情况是根据元素形状计算的
参数:
(1)参数1圆心形状、位置
①circle 圆心为圆形 ellipse椭圆
②设置宽高大小px ; at px px 设置圆心位置
(2)参数2颜色
学习网页结构
最新推荐文章于 2024-10-09 11:50:38 发布