Community Learn Tools Library Leisure
search
English
Home > List of blog posts > CSS中的背景属性和精灵图阿里图标的使用
Blogger Information
Blog 24
fans 1
comment 0
visits 20864
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
CSS中的背景属性和精灵图阿里图标的使用
知行合一
Original
667 people have browsed it

CSS常用的背景属性

背景颜色

background-color: teal;

背景裁切

  1. background-color: teal;
  2. background-clip: content-box;/*不会覆盖padding*/

背景渐变

  1.         background: linear-gradient(yellow, green)
  2.         /* background: linear-gradient(45deg, yellow, green); */
  3.        /* background: linear-gradient(to left, yellow, green) ; */
  4.       /* background: linear-gradient(yellow, white, orange); */

背景图片沿X轴平铺

  1. background: url(images/bg.jpg) repeat-x;
  2. /*background: url(images/bg.jpg) repeat;
  3. background: url(images/bg.jpg) repeat-y;*/

背景图片位置

  1.  background: url(images/bg.jpg) no-repeat;
  2.    background-position: 50px 20px;
  3.             /* background-position: right top; */          
  4.             /* background-position: right; */
  5.             /*只写一个值，另外一个默认是center*/
  6.             /* background-position: 50% 20%; */

背景样式简写

  1. background: lightgreen url('images/bg.jpg') no-repeat;
  2.             box-shadow: 5px 10px 10px orangered;

精灵图

精灵图是为了减少图片的加载请求。现在已经用的少了，主流是用字体图标的方式。

  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.                 .box {
  9.                     width: 502px;
  10.                     height: 577px;
  11.                     border: 1px solid tomato;
  12.                     box-sizing: border-box;
  13.                 }
  14.                 .box_b {
  15.                     width: 80px;
  16.                     height: 80px;
  17.                     background: url("images/jinglingtu.jpg") no-repeat;
  18.                     background-position: -110px 0;
  19.                 }
  21.                 .box_n {
  22.                     width: 80px;
  23.                     height: 80px;
  24.                     background: url("images/jinglingtu.jpg") no-repeat;
  25.                     background-position: -220px -244px;/*一定是负值*/
  26.                 }
  27.                 .box_z {
  28.                     width: 80px;
  29.                     height: 80px;
  30.                     background: url("images/jinglingtu.jpg") no-repeat;
  31.                     background-position: -424px -490px;
  32.                 }
  33.             </style>
  34.         </head>
  35.         <body>
  36.             <div class="box"><img src="images/jinglingtu.jpg"></div>
  37.             <div class="box_b"></div>
  38.             <div class="box_n"></div>
  39.             <div class="box_z"></div>
  40.         </body>
  41.         </html>

阿里字体图标

打开阿里字体官网，搜索您需要的图标，添加到项目。如图所示。





将下载的文件放入网站目录中。

使用方式一Unicode

  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.                 @font-face {
  9.                     font-family: 'iconfont';
  10.                     src: url('font/iconfont.eot');
  11.                     src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
  12.                         url('font/iconfont.woff2') format('woff2'),
  13.                         url('font/iconfont.woff') format('woff'),
  14.                         url('font/iconfont.ttf') format('truetype'),
  15.                         url('font/iconfont.svg#iconfont') format('svg');
  16.                 }    
  17.                 .iconfont {
  18.                     font-family: "iconfont" !important;
  19.                     font-size: 16px;
  20.                     font-style: normal;
  21.                     -webkit-font-smoothing: antialiased;
  22.                     -moz-osx-font-smoothing: grayscale;
  23.                 }    
  24.                 .icon {
  25.                     font-size: 40px; /*默认字体16像素太小，改大一点*/
  26.                 }
  27.             </style>
  28.         </head>    
  29.         <body>
  30.             <span class="iconfont icon"></span>
  31.             <span class="iconfont icon"></span>
  32.             <span class="iconfont icon"></span>    
  33.         </body>    
  34.         </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.             <title>阿里字体图标</title>
  7.             <!--第一步：引入项目下面生成的 fontclass 代码：-->
  8.             <link rel="stylesheet" href="font/iconfont.css">
  9.             <style>
  10.                 .icon {
  11.                     font-size: 100px;
  12.                      color: tomato;
  13.                 }
  14.             </style>
  15.         </head>
  17.         <body>
  18.             <span class="iconfont icon-shouji icon"></span>
  19.             <!--第二步：挑选相应图标并获取类名，应用于页面：-->
  20.             <span class="iconfont icon-weixin icon"></span>
  21.             <span class="iconfont icon-QQ icon"></span>
  22.         </body>    
  23.         </html>

总结

阿里的字体图标非常好用，使用简单方便，有大量的图标可以直接使用。而且可以通过CSS改大小，样式等。推荐大家使用！

不知道编辑器问题，还是怎样的 markdown编辑下。显示有四级标题，可提交后，四级标题有时候显示不出来。

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