css基础-5-背景、精灵图和字体图标

最新推荐文章于 2023-03-22 15:05:47 发布

Neptuneyut

最新推荐文章于 2023-03-22 15:05:47 发布

阅读量438

点赞数

分类专栏： Web前端文章标签： css

本文链接：https://blog.csdn.net/qq_42491125/article/details/106268648

版权

Web前端专栏收录该内容

25 篇文章 1 订阅

订阅专栏

文章目录

背景
精灵图
字体图标
- 字体图标优势
- 字体图标使用

背景

背景常用来设置一些小的logo、精灵图或者一些超大的图片背景，背景的优点在于可以通过设置位置来实现精确定位
在这里插入图片描述

属性	作用	值
background-color	背景颜色	默认`transparent`
background-image	背景图片	`url(背景图片)`
background-size	大小	`width`,`height`，写一个保持比例
background-repeat	重复	`repeat`,`no-repeat`,`repeat-x`,`repeat-y`
background-position	背景位置	方位词`top/bottom/left/right/center`;单位`x-y`
background-attachment	背景附着	`scroll`滚动,`fixed`固定
background	半透明背景	`rgba(0,0,0,0.5)`,最后一个是透明度

给元素设置背景图片时需要首先指定background-image,url()中可以是本地图片也可以是网址
定位的时候，可以使用方位词也可以使用距离元素左上角原点的单位，第一个值是x方向，第二个是y方向
所在元素必须有大小，才能显示背景图片

精灵图

什么是精灵图

精灵图（sprites）：将网页背景的所有小图放在一张大图上作为背景图片，需要哪一块通过设置盒子大小并调整背景图片的位置达到精确显示某一块区域

为什么需要精灵图

若背景图片很多，每次加载网页时，都会访问所有的图片文件，造成服务压力，影响页面加载速度；精灵图只需加载一次，即可访问所有图标，有效提高了加载速度

实现方法

第一步，将所有背景图标放在一张背景图上
第二步，准备一个目标图标大小的盒子
第三步，给盒子设置背景图片的偏移位置（左/上为负值，右下为正值）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            /* 目标log大小 */
            width: 252px;
            height: 308px;
            /* 目标log相对左上角坐标，减去相应的值即可 */
            background: url('alpha_log.png') no-repeat -318px -350px;
        }
    </style>
</head>

<body>
    <div></div>
    <!-- <img src="/Users/yut/Desktop/alpha_log.png" alt=""> -->
</body>

</html>

在这里插入图片描述

字体图标

字体图标优势

字体图标本身是字体类型，体量小，加载快
可设置图标颜色、透明、阴影和旋转等属性，使用更灵活

字体图标使用

1.字体图标下载
- icomoon：国外最全的免费字体图标库，访问速度稍慢
- iconfont：阿里大佬的免费图标库，全而快，需要帐号登陆
  
  2.字体图标引入

Neptuneyut

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css基础-5-背景、精灵图和字体图标

文章目录背景背景背景常用来设置一些小的logo、精灵图或者一些超大的图片背景，背景的优点在于可以通过设置位置来实现精确定位属性作用值background-color背景颜色默认transparentbackground-image背景图片url(背景图片)background-size大小width,height，写一个保持比例background-repeat重复repeat,no-repeat,repeat-x,repeat-ybac
复制链接

扫一扫

专栏目录