简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > CSS背景属性、精灵图和字体图标引用流程
Blogger Information
Blog 11
fans 0
comment 0
visits 13360
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背景属性、精灵图和字体图标引用流程
Blueprint
Original
1010 people have browsed it

背景常用属性

先来个概述图：

color（颜色）

  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>Document</title>
  8.     <style>
  9.       div {
  10.         /* 设定div大小 */
  11.         width: 200px;
  12.         height: 200px;
  13.         /* 边框线方便演示 */
  14.         border: 1px dashed black;
  15.         float: left;
  16.       }
  17.       .box {
  18.         /* 背景颜色:16进制 */
  19.         background-color: #eee;
  20.       }
  21.       .box2 {
  22.         /* 背景颜色:rgb */
  23.         background-color: rgb(109, 109, 109);
  24.       }
  25.       .box3 {
  26.         /* 背景颜色:单词 */
  27.         background-color: gray;
  28.       }
  29.       .box4 {
  30.         /* 背景颜色:rgba */
  31.         background-color: rgb(109, 109, 109,0.5) ;/*其中a代表透明度*/
  32.       }
  37.     </style>
  38.   </head>
  39.   <body>
  40.     <div class="box">box</div>
  41.     <div class="box2">box2</div>
  42.     <div class="box3">box3</div>
  43.     <div class="box4">box4</div>
  44.   </body>
  45. </html>

image（背景图片）和repeat（重复性）

背景默认显示方式：垂水平直平铺

No-repeat:不重复

Repeat-x:水平平铺

Repeat-y:垂直重复

  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>Document</title>
  8.     <style>
  9.       div {
  10.         /* 设定div大小 */
  11.         width: 600px;
  12.         height: 600px;
  13.         /* 边框线方便演示 */
  14.         border: 1px dashed black;
  15.         float: left;
  16.         margin: 0 20px;
  17.       }
  19.       .box {
  20.           /* 图片地址可以为本地图片和网络地址 */
  21.         /* 背景默认显示方式,水平垂直平铺 */
  22.         background-image: url("1.jpeg");
  23.       }
  24.       .box2 {
  25.         /* 不重复 */
  26.         background-image: url("1.jpeg");
  27.         background-repeat: no-repeat;
  28.       }
  29.       .box3 {
  30.         /* 水平平铺 */
  31.         background-image: url("1.jpeg");
  32.         background-repeat: repeat-x;
  33.       }
  34.       .box4 {
  35.         /* 垂直平铺 */
  36.         background-image: url("1.jpeg");
  37.         background-repeat: repeat-y;
  38.       }
  39.     </style>
  40.   </head>
  41.   <body>
  42.     <div class="box">box</div>
  43.     <div class="box2">box2</div>
  44.     <div class="box3">box3</div>
  45.     <div class="box4">box4</div>
  46.   </body>
  47. </html>

sizing(大小)

属性值cover 宽和高较高值得比例缩放 会破坏图片的显示效果

属性值contain 宽和高较低值得比例缩放 不会破坏图片的显示效果

  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>Document</title>
  7.     <style>
  8.       div {
  9.         /* 设定div大小 */
  10.         width: 600px;
  11.         height: 800px;
  12.         /* 边框线方便演示 */
  13.         border: 1px dashed black;
  14.         float: left;
  15.         margin: 0 20px;
  16.       }
  17.       .box1 {
  18.         /* 导入图片 */
  19.         background-image: url("1.jpeg");
  20.         /* 设置不重复 */
  21.         background-repeat: no-repeat;
  22.         /* 属性值contain  宽和高较低值得比例缩放 不会破坏图片的显示效果*/
  23.         background-size: contain;
  24.       }
  25.       .box2 {
  26.         /* 导入图片 */
  27.         background-image: url("1.jpeg");
  28.         /* 设置不重复 */
  29.         background-repeat: no-repeat;
  30.         /* 属性值cover  宽和高较高值得比例缩放 会破坏图片的显示效果*/
  31.         background-size: cover;
  32.       }
  33.       .box3 {
  34.         /* 导入图片 */
  35.         background-image: url("1.jpeg");
  36.         /* 设置不重复 */
  37.         background-repeat: no-repeat;
  38.         /* 数值 */
  39.         background-size: 200px 200px;
  40.       }
  41.       .box4 {
  42.         /* 导入图片 */
  43.         background-image: url("1.jpeg");
  44.         /* 设置不重复 */
  45.         background-repeat: no-repeat;
  46.         /* 百分百 */
  47.         background-size: 20% 20%;
  48.       }
  49.     </style>
  50.   </head>
  51.   <body>
  52.     <div class="box1">box1</div>
  53.     <div class="box2">box2</div>
  54.     <div class="box3">box2</div>
  55.     <div class="box4">box2</div>
  56.   </body>
  57. </html>

position（定位）

数值定位是，属性值是有顺序的

属性值只有一个，第二个默认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>Document</title>
  8.     <style>
  9.       div {
  10.         width: 800px;
  11.         height: 1000px;
  12.         border: 1px dashed red;
  13.         float: left;
  15.         /* 导入图片 */
  16.         background-image: url('1.jpeg');
  17.         /* 防止重复 */
  18.         background-repeat: no-repeat;
  19.       }
  21.       .box1{
  22.           /* 数值定位,水平/垂直  有顺序 */
  23.           background-position: 100px ;
  25.       }
  26.       .box2{
  27.           /* 方位定位,无顺序要求 */
  28.           background-position:  center left;
  29.       }
  31.       .box3{
  32.       /* 方位定位,无顺序要求 */
  33.       background-position:  100%  20%;
  34.   }
  36.   /* 定位时,单个值,第二个值默认center */
  37.     </style>
  38.   </head>
  39.   <body>
  40.     <div class="box1"></div>
  41.     <div class="box2"></div>
  42.     <div class="box3"></div>
  43.   </body>
  44. </html>

背景固定

使用fixed属性值时，图片脱离原有的位置，可以使用定位。

  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>Document</title>
  7.   </head>
  9.   <style>
  10.     body > * {
  11.       float: left;
  12.       border: 1px dashed red;
  13.       margin: 0 100px;
  14.     }
  15.     .box1,
  16.     .box2 {
  17.       width: 600px;
  18.       height: 600px;
  19.       overflow: scroll;
  20.     }
  22.     .box3,
  23.     .box4 {
  24.       width: 256px;
  25.       height: 600%;
  26.       background-repeat: no-repeat;
  27.       background-image: url("1.jpeg");
  28.     }
  30.     .box3 {
  31.       /* 固定背景 */
  32.       background-attachment: fixed;
  33.       /* 定位背景位置 */
  34.       background-position: 120px 20px;
  35.     }
  36.     .box4 {
  37.       /* 背景不固定默认值*/
  38.       background-attachment: scroll;
  39.     }
  40.   </style>
  41.   <body>
  42.     <div class="box1">
  43.       <div class="box3"></div>
  44.     </div>
  45.     <div class="box2">
  46.       <div class="box4"></div>
  47.     </div>
  48.   </body>
  49. </html>

简写属性

background：颜色 图片 重复 固定 定位；

同时拥有颜色和图片时， 图片会覆盖颜色

  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>Document</title>
  7.   </head>
  9.   <style>
  10.     div {
  11.       width: 500px;
  12.       height: 500px;
  13.       border: 1px dashed red;
  14.       /* 属性简写 */
  15.       background: #ccc url("1.jpeg") no-repeat scroll 100px 20px;
  16.     }
  17.   </style>
  18.   <body>
  19.     <div></div>
  20.   </body>
  21. </html>

精灵图

什么是精灵图：

css精灵(CSS sprites),是一种网页图片应用处理技术。主要是指将网页中需要的零星的小图片集成到一个大的图片中

应用的原因：

  1. 减少对浏览器的请求次数，避免网页的延迟
  2. 方便小图标的统一管理

精灵图的使用： css精灵图需要配合背景的图片和背景定位

  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>Document</title>
  7.     <style>
  8.       .box {
  9.         width: 960px;
  10.         height: 500px;
  11.         border: 1px solid black;
  13.         clear: both;
  14.       }
  15.       .box > *:not(img) {
  16.         width: 100px;
  17.         height: 100px;
  18.         border: 1px dashed red;
  19.         float: left;
  20.       }
  22.       .box1 {
  23.         /* 导入图片 */
  24.         background-image: url("1.png");
  26.         /* 定位背景获取精灵图上需要的部分图片 */
  27.         background-position: 0px -30px;
  28.       }
  29.       .box2 {
  30.         /* 导入图片 */
  31.         background-image: url("1.png");
  32.         /* 定位背景获取精灵图上需要的部分图片 */
  33.         background-position: 100px -30px;
  34.       }
  35.       .box3 {
  36.         /* 导入图片 */
  37.         background-image: url("1.png");
  38.         /* 定位背景获取精灵图上需要的部分图片 */
  39.         background-position: -90px -120px;
  40.       }
  41.       .box4 {
  42.         /* 导入图片 */
  43.         background-image: url("1.png");
  44.         /* 定位背景获取精灵图上需要的部分图片 */
  45.         background-position: -275px -210px;
  46.       }
  47.       .box5 {
  48.         /* 导入图片 */
  49.         background-image: url("1.png");
  50.         /* 定位背景获取精灵图上需要的部分图片 */
  51.         background-position: 0px -30px;
  52.       }
  53.     </style>
  54.   </head>
  55.   <body>
  56.     <div class="box">
  57.       <div class="box1"></div>
  58.       <div class="box2"></div>
  59.       <div class="box3"></div>
  60.       <div class="box4"></div>
  61.       <div class="box5"></div>
  62.       <img src="1.png" alt="" />
  63.     </div>
  64.   </body>
  65. </html>

字体图标

众所周知，单位字体的文件大小小于图片的大小，考虑精灵图处理的是一张张图片，有人就有了一个奇思妙想—把图片转换成字体（实际上字体本来就是那么设计下来的。）

转换成字体后，可以使用特殊的代码来显示出指定的图片。

字体图标比精灵图有一个非常明显的好处，因为他是字体，所以它能够改变字体颜色，能改变字体大小（并且不会失真）。

例子：

仅演示字体图标的使用

1.获取字体图标

iconfont（下面演示使用）

Font Awesome

IconMonstr

IconShock·····

​ 多图演示获取步骤：


将下载的压缩包解压获取文件夹，并将压缩包下的所有文件移动到项目（也可将文件夹拖至项目，保证项目的目录层次）

  1. 字体引用

    第一步：引入项目下面生成的 fontclass 代码：

  1. <link rel="stylesheet" href="./iconfont.css">

第二步：挑选相应图标并获取类名，应用于页面：

  1. <span class="iconfont icon-xxx"></span>

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
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！