Community Learn Tools Library Leisure
search
English
Home > List of blog posts > html背景图片与字体图标
Blogger Information
Blog 100
fans 8
comment 2
visits 150189
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
html背景图片与字体图标
lilove的博客
Original
1307 people have browsed it

在html页面中块元素背景可以丰富多彩：

比如改变背景颜色：

给块元素添加 background-color: color; 自己喜欢的颜色；

如此属性还有：

  • background-image 图片背景；

  • background-repeat 背景图片不重复；

  • background: linear-gradient() 渐变颜色；

  • background-attachment 固定背景图像

  • background-position 背景位置方向

…

完整代码示例：

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>小刚的日志：背景</title>
  7.   </head>
  8.   <style>
  9.     div:nth-child(1) {
  10.       width: 400px;
  11.       height: 400px;
  12.       padding: 10px;
  13.       border: 2px solid lightseagreen;
  14.       background-color: goldenrod;
  16.       /* 背景裁切 */
  17.       /* 内容区域 */
  18.       background-clip: content-box;
  19.       /* 边框区域 */
  20.       background-clip: border-box;
  22.       /* 背景渐变 */
  23.       /* 默认上下方向 */
  24.       background: linear-gradient(blue, white);
  25.       /* 45度 */
  26.       background: linear-gradient(45deg, blue, white);
  27.       /* 左到右 */
  28.       background: linear-gradient(to right, blue, white);
  29.       /* 多种颜色及透明度 */
  30.       background: linear-gradient(
  31.         to left,
  32.         green,
  33.         blue,
  34.         white,
  35.         /* 0.5是透明度 */ rgba(215, 74, 248, 0.5)
  36.       );
  38.       /* 背景图片 */
  39.       background-image: url("baby.jpg");
  40.       /* 背景图片不重复 */
  41.       background-repeat: no-repeat;
  42.       /* 横向重复 */
  43.       /* background-repeat: repeat-x; */
  44.       /* 纵向重复 */
  45.       /* background-repeat: repeat-y; */
  46.       /* 背景不随滚动条滚动 */
  47.       /* background-attachment: fixed; */
  48.       /* 背景定位 有两个属性值*/
  49.       /* 只写一个另外一个就是默认居中 */
  50.       background-position: right;
  51.       /* 百分比只写一个另一个就和第一个一样 */
  52.       background-position: 20% 30%;
  53.       background-position: 50%;
  54.       /* 背景图片大小 */
  55.       /* 宽高，可以用百分比 */
  56.       background-size: 50px 50px;
  57.       /* 高或宽铺满，另一个等比 */
  58.       background-size: contain;
  59.       /* 铺满背景 */
  60.       background-size: cover;
  62.       /* 简写 */
  63.       background: black;
  64.       background: url("baby.jpg") no-repeat center;
  65.     }
  67.     /* 背景颜色与图片冲突，只能选其一 */
  68.     div:last-of-type {
  69.       width: 300px;
  70.       height: 300px;
  71.       border: 2px solid black;
  72.       /* 边框添加阴影 */
  73.       box-shadow: 3px 3px 2px lightgrey;
  74.       /* 边框圆角 */
  75.       border-radius: 50%;
  76.       /* 添加背景图片 */
  77.       background: url("baby.jpg") no-repeat 50%;
  78.     }
  79.   </style>
  80.   <body>
  81.     <div></div>
  82.     <div></div>
  83.   </body>
  84. </html>

在html页面中放置多个图片会消耗过多的请求资源

  • 那么传统的方式是使用“精灵图”/“雪碧图”将图片集合起来。

先从网络上下载一套图标集合放到一张图片上：

通过测量：每个图标的宽高约55px，上下左右间隔约7px。

获取图片中的握手图标位置：

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>小刚日志：精灵图/雪碧图</title>
  7.   </head>
  8.   <style>
  9.     .box1 {
  10.       width: 400px;
  11.       height: 400px;
  12.       border: 2px solid lightslategrey;
  13.       background: url("icon.png");
  14.     }
  15.     .box1 + div {
  16.       width: 63px;
  17.       height: 63px;
  18.       background: url("icon.png") no-repeat;
  19.       background-position: -217px -217px;
  20.     }
  21.   </style>
  22.   <body>
  23.     <div class="box1"></div>
  24.     <div></div>
  25.   </body>
  26. </html>
  • 运行效果：

还可以通过javascript脚本将图标循环出来使用。

更加合适的图标使用方法：字体图标！

在阿里图标库中选择合适的图标使用：

  • 登陆阿里图标网站，只能用github和新浪微博账号；

  • 搜索自己想要的图标，并收藏到自己的账号项目下；

  • 加入项目；

  • 下载项目；

  • 将下载的压缩包解压缩到项目目录中就可以使用了；

代码样例：3种不同使用方式

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>小刚日志：字体图标unicode方式</title>
  7.   </head>
  8.   <style>
  9.     @font-face {
  10.       font-family: "iconfont";
  11.       src: url("unicode/iconfont.eot");
  12.       src: url("unicode/iconfont.eot?#iefix") format("embedded-opentype"),
  13.         url("unicode/iconfont.woff") format("woff"),
  14.         url("unicode/iconfont.ttf") format("truetype"),
  15.         url("unicode/iconfont.svg#iconfont") format("svg");
  16.     }
  17.     /* 设置样式 */
  18.     .iconfont {
  19.       font-family: "iconfont" !important;
  20.       font-size: 16px;
  21.       font-style: normal;
  22.       -webkit-font-smoothing: antialiased;
  23.       -webkit-text-stroke-width: 0.2px;
  24.       -moz-osx-font-smoothing: grayscale;
  25.     }
  26.     .test {
  27.       font-size: 66px;
  28.     }
  29.   </style>
  30.   <body>
  31.     <i class="iconfont test">&#xe656;</i>
  32.   </body>
  33. </html>
  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>小刚日志：字体图标fontclass方式</title>
  7.     <!-- 引入图标 -->
  8.     <link rel="stylesheet" href="fontclass/iconfont.css" />
  9.   </head>
  10.   <style>
  11.     /* 设置样式 */
  12.     .iconfont {
  13.       font-family: "iconfont" !important;
  14.       font-size: 16px;
  15.       font-style: normal;
  16.       -webkit-font-smoothing: antialiased;
  17.       -webkit-text-stroke-width: 0.2px;
  18.       -moz-osx-font-smoothing: grayscale;
  19.     }
  20.     .test {
  21.       font-size: 66px;
  22.     }
  23.   </style>
  24.   <body>
  25.     <i class="iconfont icon-icon-test test"></i>
  26.   </body>
  27. </html>
  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>小刚日志：字体图标symbol方式</title>
  7.   </head>
  8.   <style type="text/css">
  9.     /* 设置样式 */
  10.     .icon {
  11.       width: 3em;
  12.       height: 3em;
  13.       vertical-align: -0.15em;
  14.       fill: currentColor;
  15.       overflow: hidden;
  16.     }
  17.     .test {
  18.       width: 13em;
  19.       height: 13em;
  20.     }
  21.   </style>
  22.   <body>
  23.     <svg class="icon test" aria-hidden="true">
  24.       <use xlink:href="#icon-icon-test1"></use>
  25.     </svg>
  26.   </body>
  27.   <!-- 引入图标 -->
  28.   <script type="text/javascript" src="symbol/iconfont.js"></script>
  29. </html>
  • 运行效果：

总结：

  1. 背景样式的各种属性配合可以做成很酷炫的效果；
  2. 背景图片中的CSS样式可以简写；
  3. 精灵图/雪碧图已经不常用，原理上使用了定位方法移动图片实现；
  4. 字体图标解决了图片请求资源消耗问题，设置起来也很方便；
  5. 阿里图标使用中注意版权问题。
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