admin 管理员组文章数量: 887021
背景图片.
浏览器编译网站的是有顺序，先是html结构，然后再加载外部资源 ，
例如css文件，图片，数据请求
背景图片是以外部资源的形式加载进网页的，
浏览器每加载一个外部资源就需要单独的发送一次请求，
但是我们外部资源并不是同时加载，浏览器会在资源被使用才去加载资源
第一个练习：分了三次请求
问题： （1）第一次切换图片时，会发现图片有一个非常快的闪烁，
（2）网站性能不好
解决图片闪烁问题，提高网站的性能，可以使用 雪碧图/精灵图 ,学名：图片整合技术
实现原理：
将多张图片整合在一起，然后一次性引入到网站中，
减少网络请求，以提高网站的性能
实现步骤：
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
(2)xxdeg 表示角度，度数，会更灵活,正值顺时针，负值逆时针
(3)turn 表示圈 .5turn，一圈表示360度
参数2:颜色1
参数3:颜色2
注意：
可以写多个颜色，默认情况下，颜色是均分占比的
也可以手动的指定渐变的分布情况
background-image:linear-gradient(red 50px,yellow) ;
1:radial-gradient() ['reidiəl] ['ɡreidiənt]
经向渐变（放射性的效果）
默认情况下，圆心是根据元素的形状来计算的
正方形 圆形
长方形 椭圆型
参数1:圆心的形状(可以指定圆心的形状)
（1）circle圆形，ellipse椭圆，
（2）设置的大小 at 位置==>像素1 像素2 at 0px 0px
background-image: radial-gradient(100px 100px at 100px 0px,red,yellow);
参数2:颜色1
参数3:颜色2
颜色后直接跟占比
2:repeating-linear-gradient()
可以平铺的线性渐变
background-image: repeating-linear-gradient(yellow 0px, red 50px);
参数跟linear-gradient是一样的
本文标签： 背景图片
版权声明：本文标题：背景图片. 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1688154407h185763.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论