search

博客列表 >html背景图片与字体图标

html背景图片与字体图标

lilove的博客
lilove的博客原创
2020年06月21日 03:29:001304浏览

在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. 阿里图标使用中注意版权问题。
上一条：伪类 :target,:not, ::before, ::after 的使用下一条：layui前端框架基础
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多