雪碧图（又名精灵图）、渐变色，放射渐变的写法

最新推荐文章于 2023-01-13 23:14:13 发布

头顶一尘不染

最新推荐文章于 2023-01-13 23:14:13 发布

阅读量170

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/LYC010727/article/details/128130580

版权

雪碧图

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css"></style>
    <!--
解决图片闪烁问题，提高网站的性能，可以使用 雪碧图/精灵图 ,学名：图片整合技术
      实现原理：
        将多张图片整合在一起，然后一次性引入到网站中，
          减少网络请求，以提高网站的性能
      实现步骤：
        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>

渐变色

<!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>
    <!-- 渐变色：从一个颜色向另一个颜色进行过渡，
    渐变色不是单纯的背景色，可以把它看成是一个图片，用background-image: ;
    -->
    <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>
<!-- 
渐变：通过渐变可以设置一些复杂的背景颜色，
        可以从实现一个颜色向其他颜色过渡的效果.
  渐变是图片，通过 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是一样的
-->

放射渐变

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