Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 背景属性、精灵图、阿里图标的学习
Blogger Information
Blog 13
fans 0
comment 0
visits 13163
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
背景属性、精灵图、阿里图标的学习
小追
Original
801 people have browsed it

1.背景的属性

1.1背景属性用于定义HTML元素的背景，通常用以下常用属性来控制背景效果

序号 属性 定义
1. background-color 设置背景颜色；
2. background-size 设置背景缩放，contain值可以将背景图放大到边框3边大小，cover值可以等比例缩放图片；
3. background-image:url("") 链接背景图片；
4. background-clip border-box值为以边框剪切背景，content-box值为以内容区剪切背景；
5. background-repeat 不设置背景默认水平垂直方向按图片大小重复铺满，no-repeat不重复，repeat-x水平方向重复，repeat-y垂直方向重复；
6. background-position 值可以是像素点，可以是百分百，也可以是关键词right center

背景属性的操作详细代码：

  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:450px;
  10.             height:450px;
  11.             border:1px solid #000;
  12.             /* 半径也可以是像素点 */
  13.             border-radius:50%;
  14.             background-color:lightgreen;
  15.             padding:20px;
  16.             /* 因为内边距是透明的，只能设置宽高，不能设置样式，所以背景色默认是可以从边框透出来到内边距的 */
  17.             /* 控制背景的覆盖范围在内容区，裁切 */
  18.             /* 以边框裁切 */
  19.             background-clip:border-box;
  20.             /* 以内容区裁切 */
  21.             background-clip:content-box;
  22.             /* 渐变 */
  23.             background:linear-gradient(red,yellow);
  24.             background:linear-gradient(45deg,red,yellow);
  25.             background:linear-gradient(to right,red,yellow);
  26.             background:linear-gradient(to left,red,yellow);
  27.             /* rgba,前面是rgb颜色后面的a表示透明度 */
  28.             background:linear-gradient(to left,rgba(255,0,0,0.7),yellow);
  30.             /* 背景图片 */
  31.             background-image:url("girl.jpg");
  32.             /* 不让图片重复填充 */
  33.             background-repeat:no-repeat;
  34.             /* 让图片朝一个方向重复x y */
  35.             /* background-repeat:repeat-x; */
  36.             /* 让图片滚动，还需要别的设置，先了解一下 */
  37.             /* background-attachment:fixed; */
  38.             /* 背景定位 */
  39.             background-position:50px 50%;
  40.             /* 关键词谁在前谁在后无所谓 ，只写一个值的时候后面默认是center*/
  41.             background-position:right center;
  42.             /* 当只有一个值是50%时，第二个值默认也是50% */
  43.             background-position:50%;
  44.             /* 放大到图片与边框3面相接 */
  45.             background-size:contain;
  46.             /* 等比缩放，用到的上面那个多 */
  47.             background-size:cover;
  49.             /* 简写 */
  50.             /* background:blue; */
  51.             bacrground:url("girl.jpg") no-repeat left;
  52.             /* 5px是水平向右，8px是垂直向下，10px是羽化效果值 */
  53.             /* box-shadow:5px 8px 10px #888; */
  54.         }
  55.         .box:hover{
  57.             /* 外发光效果 */
  58.             box-shadow:0 0 10px #888;
  59.             cursor:pointer;
  60.         }
  61.     </style>
  62. </head>
  63. <body>
  64.     <div class="box"></div>
  65. </body>
  66. </html>

效果图：

2.精灵图（雪碧图）

网站的每一张图片都需要向服务器请求，图片加载过多会非常占用服务器资源。所以出现精灵图，只需要向服务器请求一张图就可以展示不同图片内容。

" class="reference-link">图片在显示器显示方式：

所以将图片位置移动到显示区域就可以显示需要的内容;

  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;
  11.             border:1px solid #000;
  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.             background-image:url(1.png);
  20.             background-repeat:no-repeat;
  21.             background-position:-220px -110px; 
  22.         }
  23.         .box3{
  24.             width:110px;
  25.             height:110px;
  26.             background-image:url(1.png);
  27.             background-repeat:no-repeat;
  28.             background-position:-220px -220px;   
  29.         }
  30.     </style>
  31. </head>
  32. <body>
  33.     <!-- 网站每个内容都是要加载请求的，页面中图片多请求多，占用的资源会大，用一个精灵图一次请求就可以加载到 -->
  34.     <div class="box1"></div>
  35.     <div class="box2"></div>
  36.     <div class="box3"></div>
  37. </body>
  38. </html>

效果展示：

3.阿里字体图标的使用方法：

3.1可以用微博或github账号登录阿里图标网站；

3.2找到需要的图标点进去后将其加入购物车；

3.3将购物车里的图标都添加到项目中；

3.4在项目中下载图标；

3.5解压打开文件，找到demo_index.html文件在浏览器中打开；

3.6在自己的网页中添加阿里图标提示文件中的代码；

font-class代码使用方法1：

  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>阿里字体图标的使用方法1</title>
  7.     <!-- 引入字体图标的类样式 -->
  8.     <link rel="stylesheet" href="font/iconfont.css">
  9.     <style>
  10.         .hot{
  11.             /* 字体图标可以当成字体去设置 */
  12.             font-size:60px;
  13.             color:coral;
  14.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <div>
  19.         <!-- 把图标名粘贴到class=iconfont后面,然后去掉“.icon-rexiaochanpin”小点 -->
  20.         <span class="iconfont icon-pingguo hot"></span>
  21.     </div>
  22. </body>
  23. </html>

效果：

unicode代码使用方法2：

html代码：
  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.     <!-- 在浏览器开发者工具-NetWork中检查一下都加载到没，没有变红就行 -->
  7.     <link rel="stylesheet" href="font-icon.css">
  8.     <title>阿里字体图标的使用方法2</title>
  9.     <style>
  10.         .iconfont{
  11.             color:#888;
  12.             font-size:26px;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <!-- 1.创建一个css样式表，下载下来的css样式粘贴到文件中
  18.     2.在html中链接css样式表，用span调用编码。 -->
  19.     <div>
  20.         <!-- <span></span>中间是字体图标编码 -->
  21.         <span class="iconfont">&#xe621;</span>
  22.     </div>
  23.     <form action="">
  24.         <label for="psw">
  25.             <input type="password" name="password" /> <span class="iconfont">&#xe620;</span>
  26.         </label>
  28.     </form>
  29. </body>
  30. </html>
css代码：
  1. @font-face {
  2.     /* 粘贴过来时没有正确的字体路径自己添加一下 */
  3.     font-family: 'iconfont';
  4.     src: url('font/iconfont.eot');
  5.     src: url('font/iconfont.eot?#iefix') format('embedded-opentype'),
  6.         url('font/iconfont.woff2') format('woff2'),
  7.         url('font/iconfont.woff') format('woff'),
  8.         url('font/iconfont.ttf') format('truetype'),
  9.         url('font/iconfont.svg#iconfont') format('svg');
  10.   }
  12.   .iconfont {
  13.     font-family: "iconfont" !important;
  14.     font-size: 16px;
  15.     font-style: normal;
  16.     -webkit-font-smoothing: antialiased;
  17.     -moz-osx-font-smoothing: grayscale;
  18.   }

效果:

Correcting teacher：WJWJ

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