Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 网页背景、精灵图、阿里字体图标引用的初次体验
Blogger Information
Blog 11
fans 0
comment 0
visits 8650
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
网页背景、精灵图、阿里字体图标引用的初次体验
Haggi的糖果屋
Original
635 people have browsed it

一、网页背景控制

网页背景属性：

属性 说明
background-color 背景色
background-clip content-box
background: linear-gradient 渐变
background-image 背景图
background-repeat 重复
background-attachment 固定位置
background-position 定位
background-size 背景图大小样式

实例：
1.background-color：
代码：

  1. <style>
  2.       .box {
  3.         background-color: aqua;
  4.         width: 300px;
  5.         height: 300px;
  6.         margin: auto;
  7.       }
  8.     </style>

运行图：

2.background-clip：
代码：

  1. <style>
  2.       .box {
  3.         background-color: aqua;
  4.         width: 300px;
  5.         height: 300px;
  6.         margin: auto;
  7.         background-clip: content-box;
  8.         padding: 20px;
  9.         border: 2px solid lightcoral;
  10.       }
  11.     </style>

运行图：

3.background: linear-gradient:
代码

  1. <style>
  2.       .box {
  3.         /* background-color: aqua; */
  4.         width: 100px;
  5.         height: 100px;
  6.         margin: auto;
  7.         /* background-clip: content-box;
  8.         padding: 20px; */
  9.         /* border: 2px solid lightcoral; */
  10.         background: linear-gradient(red, yellow);
  11.       }
  12.       .box1 {
  13.         background: linear-gradient(45deg, red, yellow, green);
  14.       }
  15.       .box2 {
  16.         background: linear-gradient(to right, green, red, yellow);
  17.       }
  18.       .box3 {
  19.         background: linear-gradient(
  20.           to left,
  21.           rgba(255, 0, 0, 0.1),
  22.           rgba(0, 255, 0, 0.5)
  23.         );
  24.       }
  25.     </style>

运行图：

4.background-image、background-repeat对比
代码：

  1. background-image: url("girl.jpg");
  2.         background-repeat: no-repeat;

运行图：

5.background-attachment
代码：

  1. background-attachment: fixed;

运行图：

6.background-position

  1. <style>
  2.       .box {
  3.         width: 400px;
  4.         height: 400px;
  5.         margin: auto;
  6.         border: 2px solid lightcoral;
  7.         background-image: url("girl.jpg");
  8.         background-repeat: no-repeat;
  9.         background-position: center right;
  10.       }
  11.       .box1 {
  12.         background-position: 50%;
  13.       }
  14.       .box2 {
  15.         background-position: center left;
  16.       }
  17.       .box3 {
  18.         background-position: 50px 50px;
  19.       }

运行图:

6.background-size

  1.  .box {
  2.         width: 400px;
  3.         height: 400px;
  4.         margin: auto;
  5.         background-size: cover;
  6.         background-image: url("girl.jpg");
  7.       }

运行图：

二、精灵图

精灵图能够减少获取图片次数的请求资源，浏览器只请求一次资源，无须多次请求。
举例代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>背景实战: 精灵图/雪碧图</title>
  7.     <style>
  8.       .box1 {
  9.         width: 500px;
  10.         height: 400px;
  12.         background-image: url("1.png");
  13.         background-repeat: no-repeat;
  14.         background-position: 50px 20px;
  15.       }
  16.       .box2 {
  17.         width: 110px;
  18.         height: 110px;
  19.         float: left;
  20.         background-image: url("1.png");
  21.         background-repeat: no-repeat;
  22.         background-position: -220px -110px;
  23.       }
  25.       .box3 {
  26.         width: 110px;
  27.         height: 110px;
  28.         float: left;
  29.         background-image: url("1.png");
  30.         background-repeat: no-repeat;
  31.         background-position: -220px -220px;
  32.       }
  33.       .box4 {
  34.         width: 110px;
  35.         height: 110px;
  36.         float: left;
  37.         background-image: url("1.png");
  38.         background-repeat: no-repeat;
  39.         background-position: 0 -220px;
  40.       }
  41.     </style>
  42.   </head>
  43.   <body>
  44.     <div class="box1"></div>
  45.     <div>
  46.       <div class="box2"></div>
  47.       <div class="box3"></div>
  48.       <div class="box4"></div>
  49.     </div>
  50.   </body>
  51. </html>

运行图：

三、阿里字体图标引用方法

使用方法（Font class）
代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <!-- 引入字体图标的类样式 -->
  7.     <link rel="stylesheet" href="font-class/iconfont.css" />
  8.     <title>阿里字体图标的使用方法1</title>
  9.     <style>
  10.       .knock1 {
  11.         font-size: 100px;
  12.         color: coral;
  13.       }
  14.       .knock2 {
  15.         font-size: 100px;
  16.         color: red;
  17.       }
  18.     </style>
  19.   </head>
  20.   <body>
  21.     <div>
  22.       <span class="iconfont icon-dianzan1 knock1"></span>
  23.       <span class="iconfont icon-dianzan2 knock2"></span>
  24.     </div>
  25.   </body>
  26. </html>

运行图：

Correcting teacher：查无此人查无此人

Correction status：qualified

Teacher's comments：完成的不错，继续加油
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