Community Learn Tools Library Leisure
search
English
Home > List of blog posts > BGK各种属性/精灵图以及阿里图标的用法
Blogger Information
Blog 17
fans 1
comment 0
visits 14802
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
BGK各种属性/精灵图以及阿里图标的用法
邱世家的博客
Original
1559 people have browsed it

background 常见属性及用法汇总

NO 属性 用法
1 background-size 规定背景图片用法
2 background-clip 规定背景的绘制区域 border-box背景裁切到边框盒，padding-box裁切到内边距，content-box 裁切到内容框
3 background-color 规定背景使用的颜色
4 background-position 规定背景图像的位置 1.语言规定：top，left，right。如果只规定一个关键词那么第二个值是”center”.2.百分比规定：X% Y%，左上角是0%0%。右下角是100%100%。如果只规定一个值，另一个值是50%。
5 background-repeat 规定如何重复背景图像 repeat默认。背景图将在水平和垂直方向重复，repeat-x：在水平方向重复。-y就是垂直方向。no-repeat背景不重复就是只显示一次。
6 background-attachment 固定背景图像是否固定或随着页面其余部分滚动 scrloo默认值，背景图像会随着页面其余部分的滚动而移动。fixed：当前页面其余部分滚动，背景图像不动。inherit规定从父元素集成background-attachment属性设置
7 background-image 规定要使用的背景图像 url(“**”)指向图像的路径。none默认值，不显示背景图像

注意：background一般采用复合写法。

  • 复合属性的写法
    书写格式
    background : background-color background-image background-repeat background-attachment background-position;
    默认值
    background: transparent none repeat scroll 0% 0%;
    默认值(中文意思)
    background: 透明/无背景图片/平铺/背景图片随文本滚动/位于元素左上角
  • 设置浅绿色背景色，不平铺，在右下角显示
  1. .box {
  2.         width: 300px;
  3.         height: 300px;
  4.         border: 1px solid #000;
  5.         background: lightgreen url("girl.jpg") no-repeat 100%100%;
  6.       }
  7.     </style>

精灵图获取方法：

  • css解释：
  • CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的”background-image”,”background-repeat”,”background-position”的组合进行背景定位，background-position可以用数字精确地定位出背景图片的位置
  1. <style>
  2.       .box1 {
  3.         width: 550px;
  4.         height: 330px;
  5.         border: 1px solid #000;
  6.         background: url("p1.jpg") no-repeat;
  7.       }
  8.       /* 拿到第一行第四列的天猫图标(从上往下) */
  9.       .box2 {
  10.         width: 16px;
  11.         height: 20px;
  12.         background: url("p1.jpg") no-repeat -80px -33px;
  13.       }
  14.       /* 拿到微博女郎图标 */
  15.       .box3 {
  16.         width: 75px;
  17.         height: 26px;
  18.         background: url("p1.jpg") no-repeat -365px -195px;
  19.       }
  20.     </style>
  21.   </head>
  22.   <body>
  23.     <div class="box1"></div>
  24.     <div class="box2"></div>
  25.     <div class="box3"></div>
  26.   </body>

阿里图标的使用方法

1.打开阿里字体官网 https://www.iconfont.cn/ 并使用Githut登录
2.点击图标库选择需要的图标，点击购物车图标添加入库

3.把购车中的图标添加到项目中（无项目可新建），并下载到本地，解压缩使用（注意代码要修改本地路径）.

4.把解压缩的文件夹font放到项目中

  • Unicode方法
  • 第一步新建一个css样式表 （复制代码时要注意修改路径）

  • 通过link标签引入外部样式表，并获取

  • 注意：（&#xe618）; 代表一个图标，放在span中间。

font-class 方法引用

  1. <head>
  2.     <meta charset="UTF-8" />
  3.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  4.     <!-- 引入字体图标的类样式 -->
  5.     <link rel="stylesheet" href="font/iconfont.css" />
  6.     <title>重点之阿里图标</title>
  7.     <style>
  8.       .hot {
  9.         font-size: 50px;
  10.         color: crimson;
  11.       }
  12.       .hhh {
  13.         font-size: 80px;
  14.         color: cyan;
  15.       }
  16.     </style>
  17.   </head>
  18.   <body>
  19.     <div><span class="iconfont icon-baobao-xiangbao-kuabao hot"></span></div>
  20.     <div>
  21.       <span class="iconfont icon-naizui-muyingyongpin-yinger hhh"></span>
  22.     </div>
  23.   </body>

Correcting teacher：GuanhuiGuanhui

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