目录
注:本文基于VSCode
一、雪碧图
浏览器编译网站的是有顺序,先是html结构,然后再加载外部资源 ,
例如css文件,图片,数据请求
背景图片是以外部资源的形式加载进网页的,
浏览器每加载一个外部资源就需要单独的发送一次请求,
但是我们外部资源并不是同时加载,浏览器会在资源被使用才去加载资源
第一个练习:分了三次请求
问题: (1)第一次切换图片时,会发现图片有一个非常快的闪烁,
(2)网站性能不好
解决图片闪烁问题,提高网站的性能,可以使用 雪碧图/精灵图 ,学名:图片整合技术
实现原理:
将多张图片整合在一起,然后一次性引入到网站中,
减少网络请求,以提高网站的性能
实现步骤:
1、先确定好你要使用哪个图片或者图标
2、测量图片的大小 例如:290*300
3、根据测量的结果去建一个盒子,对外展示
4、将图片作为背景图引入到盒子中
5、设置图片的位置,以正确的显示图片
background-position:水平方向 垂直方向值;
水平方向:正值 图片向右,负值 图片向左
垂直方向:正值 图片向下,负值 图片向上
面试题:请你从提高网站性能上,简述你的建议
其中一种方式就是雪碧图/精灵图的使用
<style>
a{
display: block;
width: 155px;
height: 64px;
background-color: red;
background-image: url(./亚马逊精灵图.png);
background-position: -265px -343px;
}
/* a:hover{
background-position: 100px 100px;
} */
</style>
</head>
<body>
<!-- 创建一个超链接 -->
<a class="btn" href="#"></a>
</body>
</html>
二、渐变色
渐变色:从一个颜色向另一个颜色进行过渡,
渐变色不是单纯的背景色,可以把它看成是一个图片,用background-image: ;
渐变:通过渐变可以设置一些复杂的背景颜色,
可以从实现一个颜色向其他颜色过渡的效果.
渐变是图片,通过 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) ;
颜色后直接跟占比
2:repeating-linear-gradient()
可以平铺的线性渐变
background-image: repeating-linear-gradient(yellow 0px, red 50px);
参数跟linear-gradient是一样的
<style>
.box1 {
width: 200px;
height: 200px;
/* background-color: red; */
/* background-image: linear-gradient(red,yellow); */
background-image: repeating-linear-gradient(red 10px,yellow 20px);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
三、放射渐变
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
······
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box1 {
width: 400px;
height: 200px;
background-image: radial-gradient(50px 50px at 100px 50px,red,yellow);
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>