学习分享(12)
发布日期:2024-02-05 23:47:14 浏览次数:4 分类:技术文章

本文共 1260 字,大约阅读时间需要 4 分钟。

<!--

浏览器编译网站的是有顺序,先是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) ;

                    颜色后直接跟占比

      2:repeating-linear-gradient()

        可以平铺的线性渐变

        background-image: repeating-linear-gradient(yellow 0px, red 50px);

          参数跟linear-gradient是一样的

<!--

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

      ······

 -->

-->

转载地址:https://blog.csdn.net/qq_18219159/article/details/128137295 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:学习分享(4)css伪类
下一篇:学习分享(11)

发表评论

最新留言

能坚持,总会有不一样的收获!
[***.219.124.196]2024年02月22日 04时19分59秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

推荐文章

JavaScript初学 学习笔记3:JavaScript函数知识点(1) 2019-04-18
数据结构——堆的基本操作(堆的建立、插入、删除等)详解 2019-04-18
数据结构——哈夫曼树深入浅出含图解(含C++代码实现) 2019-04-18
JavaScript初学 学习笔记4:JavaScript之预编译深入浅出(看完肯定就懂了,别再放收到藏夹吃灰了) 2019-04-18
原生JS实现扫雷——项目总结 2019-04-18
原生JS实现——flappy bird 像素小鸟 项目总结 2019-04-18
数据结构实验——年级学生成绩管理系统 2019-04-18
数据结构实验——表达式二叉树( 以递归方式建立表达式的二叉树状结构,再分别输出前序 、中序及后序遍历结果,并计算表达式的结果。) 2019-04-18
1.LeetCode(两数之和)——JavaScript 2019-04-18
2.LeetCode(两数相加)——JavaScript 2019-04-18
1370.LeetCode(上升下降字符串)——JavaScript 2019-04-18
跟我学Spring Cloud(Finchley版)-09-Feign 2019-04-18
如何利用Python动态模拟太阳系运转 2019-04-18
python实现每天自动签到领积分的示例代码 2021-06-21
在 Python 中使用 MQTT的方法 2021-06-21
安装pyecharts1.8.0版本后导入pyecharts模块绘图时报错: “所有图表类型将在 v1.9.0 版本开始强制使用 ChartItem 进行数据项配置 ”的解决方法 2021-06-21
Python 处理日期时间的Arrow库使用 2019-04-18
Python使用socket模块实现简单tcp通信 2019-04-18
python 浮点数四舍五入需要注意的地方 2019-04-18
Python 实现简单的客户端认证 2019-04-18