Community Learn Tools Library Leisure

English

Home > List of blog posts > 背景控制的常用属性精灵图的原理与实现阿里字体图标的完整引用流程

Blogger Information

Blog 18

fans 3

comment 3

visits 16232

Special Recommendation

More>

Related recommendations

一.背景控制的常用属性

1.渐变色的使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>渐变色</title>
    <style>
      .box {
        width: 500px;
        height: 500px;
        padding: 30px;
        /* background: red; */
        border: red 1px dashed;
        /* 渐变色 */
        /* background: linear-gradient(red, pink); */
        /* 渐变色 设置渐变角度45度*/
        /* background: linear-gradient(45deg, red, pink); */
        /* 渐变色 从左到右 to right 右到左 to left*/
        background: linear-gradient(to left, red, pink);
        /* 可以多种颜色 */
        background: linear-gradient(
          to right,
          red,
          pink,
          #666,
          #954,
          rgba(255, 0, 0, 0.1)
        );
        /* 裁切掉padding中的颜色 */
        background-clip: content-box;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

2.背景图的使用

背景属性用于定义HTML元素的背景，通常用以下常用属性来控制背景效果
- background-color:设置颜色
- background-repea:设置是否平铺
  取值：no-repeat不平铺，repeat-x横向平铺，repeat-y纵向平铺，repeat横向纵向都平铺———默认
- background-position：设置背景图像的起始位置
  位置的取值可以为像素，也可以使用关键字：top left bottom right center
- background-size:设置背景图片宽度和高度
- background-attachment:设置背景是否受到滚动条影响
  （1）scroll会受滚动条的影响，当内容滚动到下方，图片会消失——默认
  （2）fixed不会受滚动条影响，一直保持在视线范围内
- 当使用简写属性时，属性值的顺序为：:
  
  background-color
  background-image
  background-repeat
  background-attachment
  background-position

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>02背景图</title>
    <style>
      .box {
        width: 500px;
        height: 500px;
        border: dashed 1px red;
        /* 图片默认是平铺的 */
        background-image: url("images/girl.jpg");
        /* 禁止平铺只显示一个图 */
        /* 背景-重复:关-重复 */
        background-repeat: no-repeat;
        /* 只朝一个方向重复 横向重复repeat-x 纵向重复 */
        /* background-repeat: repeat-y; */
        /* 背景的定位  position是位置的意思*/
        background-position: 20px 20px;
        background-position: left;
        background-position: right center;
        background-position: 30% 80%;
        /* 设置图片的铺设大小 size大小 contain包含-拉伸满*/
        background-size: contain;
        /* 拉伸 */
        background-size: cover;
        /* box-shadow: 5px 8px 6px indianred; */
      }
      .box:hover {
        /* 设置悬停鼠标手 */
        cursor: pointer;
      }
      .box2 {
        /* 设置边框投影 */
        height: 500px;
        width: 500px;
        background-color: rgb(255, 0, 0);
        /* 水平偏移 垂直偏移 扩散阴影 颜色 */
        box-shadow: 15px 20px 20px indianred;
        /* 设置圆角 */
        border-radius: 350px;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <div class="box2"></div>
  </body>
</html>

3.精灵图的使用

精灵图原理：网页每加载一个图片都需要对服务器进行一次请求，当网页存在很多图片的时候，对服务器的负荷比较大，可以将很多小图放在一张大图上，当需要使用小图的地方对大图进行背景定位，这样只需要加载一个大图片，对服务器只需要请求一次，可以减少服务器的开销，提升用户体验。
示例如下

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>03.实战精灵图</title>
    <style>
      .box1 {
        width: 300px;
        height: 300px;
        background-image: url("./images/jl.png");
        /* 背景图是否重负 禁止重复no-repeat; */
        background-repeat: no-repeat;
        /* background-image: url(images/jl.png); */
        border: 1px dashed red;
      }
      .box2 {
        width: 25px;
        height: 25px;
        background-image: url("./images/jl.png");
        background-repeat: no-repeat;
        /* 定位精灵图片位置 */
        background-position: -50px -50px;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
  </body>
</html>

三.阿里图标的引用流程

1.首先登陆https://www.iconfont.cn/
2.下载阿里图标

3.Font class 的方式编写代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>阿里字体的引用-Font class</title>
    <link rel="stylesheet" href="./font/font_tkizmt6c4ur/iconfont.css" />
    <style>
      .spa1 {
        font-size: 60px;
        color: red;
        box-shadow: 5px 5px 5px #000;
      }
    </style>
  </head>
  <body>
    <span class="iconfont icon-icon-test26 spa1"></span>
  </body>
</html>

效果如下

4.Unicode的方式编写代码

编写一个css文件并且引入 (注意修改下载的阿里字体的路径)

@font-face {
  font-family: "iconfont";
  src: url("./font/font_tkizmt6c4ur/iconfont.eot");
  src: url("./font/font_tkizmt6c4ur/iconfont.eot?#iefix")
      format("embedded-opentype"),
    url("./font/font_tkizmt6c4ur/iconfont.woff2") format("woff2"),
    url("./font/font_tkizmt6c4ur/iconfont.woff") format("woff"),
    url("./font/font_tkizmt6c4ur/iconfont.ttf") format("truetype"),
    url("./font/font_tkizmt6c4ur/iconfont.svg#iconfont") format("svg");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

引入css文件并且编写代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>阿里字体的引用-Font class</title>
    <link rel="stylesheet" href="style.css" />
    <style>
      .span1 {
        font-size: 60px;
        color: red;
        box-shadow: 5px 5px 5px #000;
      }
    </style>
  </head>
  <body>
    <span class="iconfont span1">&#xe633;</span>
  </body>
</html>

效果如下

总结

阿里字体的引用可以参考阿里字体文件中 demo.html 的说明

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：字体图标, vscode中的有一些插件,可以直接预览的, 可以关注一下

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

JavaScript forEach() 方法

2020-06-13 21:00:55