【CSS3】精灵图 背景图 阴影 过渡

CSDN话题挑战赛第2期
参赛话题:学习笔记

精灵图

为什么要使用精灵图

当用户访问一个网站时,浏览器会向服务器发送一系列请求,比如说网页上的每张图像都需要经过一次请求才能最终展示给用户。

然而,一个网页中往往包含大量的图像资源(例如在页面中展示的图片、网页的背景图像以及一些装饰性的图像等),这就会导致浏览器频繁的请求服务器,大大降低网页的加载速度。为了有效的减少请求服务器的次数,提高页面加载的速度,就出现了 CSS Sprites 技术,也被称为精灵技术

这样一来,多张图片发送多个请求可以合成一张精灵图只发送一次。

什么是精灵图

简单来说,精灵图就是一个大的背景图,您只需要使用 background-position 来移动背景图,从而只显示背景图的一部分。(给你一张大图片,选择性的显示出其中的小图)

background-position:x y;

x表示水平方向位置, y表示垂直方向的位置,原点(0,0)是精灵图的左上角。

如:这是一张大的背景图,我们需要选取其中的一个小图

在这里插入图片描述

<!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>
      span {
        display: inline-block;
        width: 18px;
        height: 24px;
        background-image: url(./images/taobao.png);
        /* 水平方向位置  垂直方向的位置 */
        /* background-position: 0 0; */
        /* 取0的时候发现图往右边便宜,想要向左侧移动图片, 位置取负数;  */
        background-position: -3px 0;
      }


      b {
        display: block;
        width: 25px;
        height: 21px;
        background-color: green;
        background-image: url(./images/taobao.png);
        background-position: 0 -90px;
      }
    </style>
  </head>
  <body>
    <!-- 精灵图的标签都用行内标签  span, b, i -->
    <span></span>
    <b></b>
  </body>
</html>

效果:
在这里插入图片描述

精灵图的优点和缺点

优点:

  • 减少服务器发送次数,减轻服务器的压力,提高页面加载速度。

缺点:

  • 在图片合并的时候,需要把多张图片有序的、合理的合并成一张图片,每个小图之间需要预留足够的空间。
  • 在宽屏或者高分辨率的屏幕下来自适应页面宽度时,如果图片不够宽,会出现背景断裂。
  • 精灵图在维护的时候比较麻烦,如果页面背景有少许改动,就需要修改整个精灵图。

背景图

背景图大小

background-size:宽度 高度;
取值作用
数字+px简单,常用
百分比盒子自身宽高百分比
cover“覆盖”,表示将背景图片等比缩放填满整个元素
contain“容纳”,表示将背景图片等比缩放至某一边紧贴元素边沿为止

background连写

background:color image repeat position /size;
<!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>
      .box {
        width: 400px;
        height:300px;
        background-color: pink;
        background-image: url(./images/girl.jpg);
        /* 不重复显示多图 */
        background-repeat: no-repeat;
        /* background-size: 300px; */
        background-size: 100%;
        /* 最大的百分比,如这里最大的是宽 */


        /* 如果图的宽或高与盒子的尺寸相同了, 另一个方向停止缩放 -- 导致盒子可能有留白 */
        /* background-size: contain; */
        /* 保证宽或高和盒子尺寸完全相同 , 导致图片显示不全 */
        /* background-size: cover; */


        /* 一般图的比例和盒子的比例都是相同的, contain 和cover效果完全相同; */
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

在这里插入图片描述

阴影

文字阴影

在CSS3的坐标系中使用的是W3C坐标系,这种坐标系与我们学习的数学坐标系的区别在于Y轴正方向的不同。

W3C坐标系:y轴正方向向下。

文字阴影语法

text-shadow:x轴偏移值  y轴偏移值  blur  color;

x轴偏移值是“水平阴影”,表示阴影的水平偏移距离,单位可以是px、em和百分比等。如果值为正,则阴影向右偏移;如果值为负,则阴影向左偏移。

y轴偏移值是“垂直阴影”,表示阴影的垂直偏移距离,单位可以是px、em和百分比等。如果值为正,则阴影向下偏移;如果值为负,则阴影向上偏移。

blur是“模糊度”,表示阴影的模糊程度,单位可以是px、em、百分比等。blur值越大,则阴影越模糊;blur值越小,则阴影越清晰。而且blur不能为负值。如果不需要阴影模糊效果,可以把blur值设置为0。

color是“阴影颜色”。

盒子阴影

box-shadow:x轴偏移值  y轴偏移值  blur  spread  color  style;

基本和文字阴影一样,不过多了spread和style属性。
spread:表示阴影大小
style:表示内阴影还是外阴影,如果想表示内阴影则用insert,表示外阴影则什么都不用写

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


      /* 文字阴影 */
      .text{
        font-size: 20px;
        /* 水平 垂直 模糊度 颜色*/
        text-shadow: 4px 4px 4px blue;
      }
      /* 盒子阴影 */
      .box {
        width: 200px;
        height: 200px;
        background-color: pink;


        /* insert内阴影要么加要么不加 */
        /* 水平 垂直 模糊度 阴影大小 颜色 */
        box-shadow:4px 4px 10px 1px blue;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <br>
    <br>
    <div class="text">文字阴影</div>
  </body>
</html>


在这里插入图片描述

过渡

在CSS3中,我们可以使用transition属性来将元素的某一个属性从“一个属性值”在指定的时间内平滑地过渡到“另一个属性值”,从而来实现动画效果。

过渡(transition)呈现的是一个“过程”。这个所谓的“过程”,通俗来说就是一种动画变化过程,如渐渐显示、渐渐隐藏、动画快慢等。
语法:

transition: 过渡属性 过渡时间 过渡方式 延迟时间;

属性:

属性说明
transition-property对元素的哪一个属性进行操作
transition-duration过渡的持续时间
transition-timing-function过渡的速率方式
transition-delay过渡的延迟时间(可选参数)

上面的写法都不常用,常用的是:

transition: all 过渡时间;

all表示所有能过渡的属性都过渡。

凡是涉及过渡,我们都是结合:hover伪类,来实现过渡效果,不然如果我们只设置过渡不使用伪类,打开浏览器直接呈现的结果而不是“过渡效果”。


<!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>
        .father{
            
            position: relative;
            width: 400px;
            height: 400px;
            background-color:beige;
        }
        /* 过渡配合hover使用, 谁变化谁加过渡属性 */
        .box {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);

            width: 400px;
            height: 400px;
            background-color: skyblue;
            
            /* transition: width 1s, background-color 2s; */
            /* 如果变化的属性多, 直接写all,表示所有 */
            transition: all 1s;
        }
        /* hover后面只能跟前面的子级,不能颠倒 */
        .box:hover{
            width: 200px;
            height: 200px;
            /* 变色 */
            background-color: rebeccapurple;
            /* 变形 */
            border-radius: 200px;
            
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="box"></div>
    </div>
    
</body>
</html>

鼠标没碰到之前:
在这里插入图片描述
鼠标碰到后:
在这里插入图片描述

  • 25
    点赞
  • 29
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 26
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 26
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Rubber树

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值