雪碧图以及渐变色

今天学习了雪碧图和渐变色的知识

<style>

display: block;

width: 470px;

height: 497px;

}

a:hover{

}

a:active{

}

</style>

</head>

<body>

</body>

</html>

<!--

浏览器编译网站的是有顺序，先是html结构，然后再加载外部资源，

例如css文件，图片，数据请求

背景图片是以外部资源的形式加载进网页的，

浏览器每加载一个外部资源就需要单独的发送一次请求，

但是我们外部资源并不是同时加载，浏览器会在资源被使用才去加载资源

第一个练习：分了三次请求

问题：（1）第一次切换图片时，会发现图片有一个非常快的闪烁，

（2）网站性能不好

-->

2.雪碧图

<!--

解决图片闪烁问题，提高网站的性能，可以使用雪碧图/精灵图 ,学名：图片整合技术

实现原理：

将多张图片整合在一起，然后一次性引入到网站中，

减少网络请求，以提高网站的性能

实现步骤：

1、先确定好你要使用哪个图片或者图标

2、测量图片的大小例如：290*300

3、根据测量的结果去建一个盒子，对外展示

4、将图片作为背景图引入到盒子中

5、设置图片的位置，以正确的显示图片

background-position：水平方向垂直方向值；

水平方向：正值图片向右，负值图片向左

垂直方向：正值图片向下，负值图片向上

面试题：请你从提高网站性能上，简述你的建议

其中一种方式就是雪碧图/精灵图的使用

-->

<style>

display: block;

width: 155px;

height: 64px;

background-color: red;

background-position: -265px -343px;

}

/* a:hover{

background-position: 100px 100px;

} */

</style>

</head>

<body>

</body>

</html>

3渐变色

<title>Document</title>

<!-- 渐变色：从一个颜色向另一个颜色进行过渡，

渐变色不是单纯的背景色，可以把它看成是一个图片，用background-image: ;

-->

<style>

.box1 {

width: 200px;

height: 200px;

/* background-color: red; */

/* background-image: linear-gradient(red,yellow); */

}

</style>

</head>

<body>

</body>

</html>

<!--

渐变：通过渐变可以设置一些复杂的背景颜色，

可以从实现一个颜色向其他颜色过渡的效果.

渐变是图片，通过 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()

可以平铺的线性渐变

参数跟linear-gradient是一样的

-->

4.放射渐变

<style>

.box1 {

width: 400px;

height: 200px;

}

</style>

</head>

<body>

</body>

</html>

<!--

1:radial-gradient() ['reidiəl] ['ɡreidiənt]

经向渐变（放射性的效果）

默认情况下，圆心是根据元素的形状来计算的

正方形圆形

长方形椭圆型

参数1:圆心的形状(可以指定圆心的形状)

（1）circle圆形，ellipse椭圆，

（2）设置的大小 at 位置==>像素1 像素2 at 0px 0px

参数2:颜色1

参数3:颜色2

······

-->

雪碧图以及渐变色相关推荐

CSS中背景颜色、背景图片、渐变色、背景定位、精灵图（雪碧图）介绍
背景background: 背景可以设置为颜色和图片,设置为图片时,可以对图片继续设置. background-color:设置背景颜色: 其颜色的取值方式前面提到过,和color的取值一样,但是默认 ...
php 实现雪碧图制作,如何在小程序中使用雪碧图
小这对近样这近样这近样这近样这近样这近样这程序对上传的代码有2M的大小限制,因此一般在小程序中使用icon的时候,要么是用icon-font,要么就是将icon图片上传到cdn再使用,而不会将图片放在 ...
python多张图片合并拼接，python制作sprite图、雪碧图
python多张图片合并拼接,python制作sprite图.雪碧图整理图片集找两个文件夹,yangying和zhaoliying,分别放上照片8张,共16张照片. 创建sprite.py # 多 ...
gulp将多张小图自动合成雪碧图
最近一直在做移动端的改版项目,做之前老大就跟我说了好几次,说这次改版一定要用雪碧图减少一个页面的图片的请求次数,能加快页面的加载速度就一定要加快,我说可以.因为之前的项目开发时间过短,也没有时间去慢慢 ...
雪碧图工具sprity（20151201更新修复了同时合并多张图的bug）
前身是css-sprite,前几天帮新同事搭建环境,意外发现sprity在window下可以安装成功了,同时也发现node版本已经4点几了,自己电脑的版本还停留在0.10,赶紧把自己的node升级到最 ...
html5复合选择器,web前端练习31----Css，选择器（基本选择器，复合选择器，属性选择器，伪类，伪元素，优先级，雪碧图练习）...
参考文档:https://man.ilovefishc.com/css3/ 一.基本选择器: 1通配符选择器 * 2元素选择器 element 3类选择器 .class 4id选择器 #id 5内联样 ...
CSS 关于雪碧图预处理和后处理方案的讨论
广告:SF 里弄了个 CSS 小圈子,欢迎一起来讨论问题前端小图标处理方案众多,本文主要介绍基于雪碧图的处理方案,分析雪碧图的预处理和后处理模式的得与失,以及在项目中通常会遇到的问题以及解决方案.其 ...
让字体图标代替雪碧图，减少请求带宽
一.什么是字体图标 icon font 及使用场景从百度百科一下什么事icon font,没有解析.那就用在使用过程的对字体图标的理解,解释一下. 字体图标就是利用字体来显示网页中的的纯色图标,或 ...
图片三：numpy制作雪碧图（如何将多个图片拼接成一张图片）
下面是我自己写的代码,每个图片直接紧挨这另个一个图片,图片直接没有任何填充,所以你的图片应该是同等规格的,大小和尺寸必须一致 #制作雪碧图 def make_grid(data, size=(4,4) ...

雪碧图以及渐变色

雪碧图以及渐变色相关推荐

最新文章

热门文章

雪碧图 以及 渐变色

雪碧图 以及 渐变色相关推荐

最新文章

热门文章

雪碧图以及渐变色

雪碧图以及渐变色相关推荐