CSS(雪碧图，渐变色)

最新推荐文章于 2023-08-23 23:59:00 发布

小小fw

最新推荐文章于 2023-08-23 23:59:00 发布

阅读量135

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/m0_61213423/article/details/128131422

版权

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

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

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

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

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

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

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

（2）网站性能不好

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
      a{
        display: block;
        width: 470px;
        height: 497px;
        background-image: url(./img3/春.JPG);
      }
      a:hover{
        background-image: url(./img3/夏.JPG);
      }
      a:active{
        background-image: url(./img3/冬.JPG);
      }
    </style>
  </head>
  <body>
    <!-- 创建一个超链接 -->
    <a class="btn" href="#"></a>
  </body>
</html>

显示效果图如下

鼠标移入

点击

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

实现原理：

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

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

实现步骤：

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>

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

渐变色不是单纯的背景色，可以把它看成是一个图片，用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>

效果图

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

······

<!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>

效果图

小小fw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS(雪碧图，渐变色)

(2)xxdeg 表示角度，度数，会更灵活,正值顺时针，负值逆时针。渐变色不是单纯的背景色，可以把它看成是一个图片，用background-image:;参数1:表示方位，（可选值，不写默认是to bottom）解决图片闪烁问题，提高网站的性能，可以使用雪碧图/精灵图 ,学名：图片整合技术。可以写多个颜色，默认情况下，颜色是均分占比的。问题：（1）第一次切换图片时，会发现图片有一个非常快的闪烁，浏览器编译网站的是有顺序，先是html结构，然后再加载外部资源，也可以手动的指定渐变的分布情况。
复制链接

扫一扫