BGK各种属性/精灵图以及阿里图标的用法 - 前端

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > BGK各种属性/精灵图以及阿里图标的用法

博主信息

博文 17

粉丝 1

访问量 19982

专题推荐

更多>

background 常见属性及用法汇总

NO	属性	用法
1	background-size	规定背景图片用法
2	background-clip	规定背景的绘制区域	border-box背景裁切到边框盒，padding-box裁切到内边距，content-box 裁切到内容框
3	background-color	规定背景使用的颜色
4	background-position	规定背景图像的位置	1.语言规定：top，left，right。如果只规定一个关键词那么第二个值是”center”.2.百分比规定：X% Y%，左上角是0%0%。右下角是100%100%。如果只规定一个值，另一个值是50%。
5	background-repeat	规定如何重复背景图像	repeat默认。背景图将在水平和垂直方向重复，repeat-x：在水平方向重复。-y就是垂直方向。no-repeat背景不重复就是只显示一次。
6	background-attachment	固定背景图像是否固定或随着页面其余部分滚动	scrloo默认值，背景图像会随着页面其余部分的滚动而移动。fixed：当前页面其余部分滚动，背景图像不动。inherit规定从父元素集成background-attachment属性设置
7	background-image	规定要使用的背景图像	url(“**”)指向图像的路径。none默认值，不显示背景图像

注意：background一般采用复合写法。

复合属性的写法
书写格式
background : background-color background-image background-repeat background-attachment background-position;
默认值
background: transparent none repeat scroll 0% 0%;
默认值(中文意思)
background: 透明/无背景图片/平铺/背景图片随文本滚动/位于元素左上角
设置浅绿色背景色，不平铺，在右下角显示

.box {
        width: 300px;
        height: 300px;
        border: 1px solid #000;
        background: lightgreen url("girl.jpg") no-repeat 100%100%;
      }
    </style>

精灵图获取方法：

css解释：
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的”background-image”,”background-repeat”,”background-position”的组合进行背景定位，background-position可以用数字精确地定位出背景图片的位置

<style>
      .box1 {
        width: 550px;
        height: 330px;
        border: 1px solid #000;
        background: url("p1.jpg") no-repeat;
      }
      /* 拿到第一行第四列的天猫图标(从上往下) */
      .box2 {
        width: 16px;
        height: 20px;
        background: url("p1.jpg") no-repeat -80px -33px;
      }
      /* 拿到微博女郎图标 */
      .box3 {
        width: 75px;
        height: 26px;
        background: url("p1.jpg") no-repeat -365px -195px;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </body>

阿里图标的使用方法

1.打开阿里字体官网 https://www.iconfont.cn/ 并使用Githut登录
2.点击图标库选择需要的图标，点击购物车图标添加入库

3.把购车中的图标添加到项目中（无项目可新建），并下载到本地，解压缩使用（注意代码要修改本地路径）.

4.把解压缩的文件夹font放到项目中

Unicode方法
第一步新建一个css样式表（复制代码时要注意修改路径）

通过link标签引入外部样式表，并获取

注意：（&#xe618）; 代表一个图标，放在span中间。

font-class 方法引用

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 引入字体图标的类样式 -->
    <link rel="stylesheet" href="font/iconfont.css" />
    <title>重点之阿里图标</title>
    <style>
      .hot {
        font-size: 50px;
        color: crimson;
      }
      .hhh {
        font-size: 80px;
        color: cyan;
      }
    </style>
  </head>
  <body>
    <div><span class="iconfont icon-baobao-xiangbao-kuabao hot"></span></div>
    <div>
      <span class="iconfont icon-naizui-muyingyongpin-yinger hhh"></span>
    </div>
  </body>