微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 背景控制常用属性和精灵图的原理与实现及阿里图标的完整引用流程

博主信息

博文 56

粉丝 1

访问量 77621

专题推荐

更多>

背景控制常用属性

属性

属性	描述
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

1、background-attachment

值	描述
scroll	默认值。背景图像会随着页面其余部分的滚动而移动。
fixed	当页面的其余部分滚动时，背景图像不会移动。
local	背景图片会随着元素内容的滚动而滚动。
inherit	规定应该从父元素继承 background-attachment 属性的设置。

实例

body 
  { 
  background-image: url("image/logo.png"); 
  background-attachment: fixed;
  }

示例图

2、background-color

属性

值	描述
color	指定背景颜色。在CSS颜色值近可能的寻找一个颜色值的完整列表。
transparent	指定背景颜色应该是透明的。这是默认
inherit	指定背景颜色，应该从父元素继承

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-color实例</title>
</head>
<style>
    body{
        background-color: #green;
    }
</style>
<body>
</body>
</html>

示例图

3、 background-position

属性

值	描述
left right top bottom	如果仅指定一个关键字，其他值将会是”center”
x% y%	第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。。默认值为：0％0％
xpos ypos	第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions
inherit	指定background-position属性设置应该从父元素继承

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-position</title>
</head>
<style>
    body{
        background-image: url("image/logo.png");
        background-repeat: no-repeat;
        background-position: top center;
    }
</style>
<body>
</body>
</html>

示例图

4、 background-image

属性

值	描述
url(‘URL’)	图像的URL
none	无图像背景会显示。这是默认
linear-gradient()	创建一个线性渐变的 “图像”(从上到下)
radial-gradient()	用径向渐变创建 “图像”。 (center to edges)
repeating-linear-gradient()	创建重复的线性渐变 “图像”。
repeating-radial-gradient()	创建重复的径向渐变 “图像”
inherit	指定背景图像应该从父元素继承

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-image</title>
</head>
<style>
    body{
       background-image: repeating-linear-gradient(red, yellow 10%, green 10%);
    }
</style>
<body>
</body>
</html>

示例图

4、 background-repeat

值	描述
repeat	背景图像将向垂直和水平方向重复。这是默认
repeat-x	只有水平位置会重复背景图像
repeat-y	只有垂直位置会重复背景图像
no-repeat	background-image不会重复
inherit	指定background-repea属性设置应该从父元素继承

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-repeat</title>
</head>
<body>
    <style>
        body{
            background-image: url("image/logo.png");
            background-repeat: repeat-y;
        }
    </style>
</body>
</html>

示例图

" class="reference-link">

综合实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景控制的常用属性</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .container{        
        width: 600px;         
    }
    .item{
        width: 195px;
        height: 200px;       
        float: left; 
        margin-left: 3px;
        margin-top: 3px;
    }
    .container > .item:nth-of-type(1){             
        background-color:yellow;  /*背景颜色 */   
        padding: 20px;  
        border: 5px dotted black;
        background-clip:padding-box;  /*内容在背景被裁剪到内边距框 */  
    }   
     .container > .item:nth-of-type(2){             
        background-color:yellow;  /*背景颜色 */   
        padding: 50px;  
        padding: 20px;  
        border: 5px dotted black;
        background-clip:border-box;  /*背景被裁剪到边框盒 */   
    }
     .container > .item:nth-of-type(3){             
        background-color:yellow;  /*背景颜色 */   
        padding: 20px;  
        border: 5px dotted black;  
        background-clip:content-box;  /*内容在背景被裁剪到内容框 */       
    }
     .container>.item:nth-of-type(4){
        background-image: url("image/1.jpg"); /*设置背景图片*/
        background-repeat: no-repeat; /*背景图片不重复*/
        background-size: 100px ;     /*背景图片长设定一个值，宽则为auto*/
        border: 1px solid #000;
    }
    .container>.item:nth-of-type(5){
        background-image: url("image/2.jpg"); /*设置背景图片*/
        background-repeat: repeat-x; /*背景图片水平重复*/
        background-size: 50px ;     /*背景图片长设定一个值，宽则为auto*/
         border: 1px solid #000;
    }
     .container>.item:nth-of-type(6){
        background-image: url("image/2.jpg"); /*设置背景图片*/
        background-repeat: repeat-y; /*背景图片垂直重复*/       
        background-size: contain;  /*把背景图片扩展至最大尺寸、完全适应内容区域*/
        background-size: cover;    /*把背景图片扩展至最大尺寸、完全覆盖背景区域*/
        background-size: 150px;    /*背景图片长设定一个值，宽则为auto*/
        background-size: 180px 180px; /*背景图片设定图片大小*/
        background-size: 50px ;     /*背景图片长设定一个值，宽则为auto*/
        border: 1px solid #000;
    }
    .container>.item:nth-of-type(7){
        border: 1px solid #000;
        background-image:url(image/5.jpg); /*设置背景图片*/  
        background-size: 50px ;
        background-repeat: no-repeat;
        background-position: 50px 60px;   /*背景图片定位左边距50px，顶边距60px*/
        background-position: 20%;         /*背景图片定位只写一个，第二个默认center*/
    }
     .container>.item:nth-of-type(8){
        border: 1px solid #000;
        background-image:url(image/5.jpg);  /*设置背景图片*/
        background-size: 50px ;
        background-repeat: no-repeat;
        background-position:left;
    }
     .container>.item:nth-of-type(9){
        border: 1px solid #000;
        background-image:url(image/5.jpg);  /*设置背景图片*/
        background-size: 50px ;
        background-repeat: no-repeat;      
        background-position: right; /*背景图片定位右垂直居中，前后顺序无限制、*/
    }
   .container>.item:nth-of-type(10)
{
        background: linear-gradient(red, yellow);         /*红色和黄色渐变*/
        background: linear-gradient(45deg, red, yellow);  /*45度角红色和黄色的渐变*/
        background: linear-gradient(to right, red, yellow); /*从左到右的渐变*/
        background: linear-gradient(
          to left,
          rgba(255, 0, 0, 0.5),  /*0.5表示透明度*/
          white,
          yellow,
          white,
          yellow
        );                                                      /*多种颜色从右到左的渐变*/
        border: 1px solid #000;
}
.container>.item:nth-of-type(11){
       box-shadow: 3px 3px 10px #111;                         /*设定盒子的阴影效果*/
       border: 1px solid #000;
       border-radius: 100px;                                    /*设定盒子边框圆角*/
}
.container>.item:nth-of-type(12){
       box-shadow: 3px 3px 10px #111;                         /*设定盒子的阴影效果*/
       border: 1px solid #000;
       border-radius: 5px;                                    /*设定盒子边框圆角*/
       background-image: url("image/4.jpg");
}
.container>.item:hover{                         
      box-shadow: 2px 2px 10px #666;         /*鼠标移到元素出现阴影*/
      cursor: pointer;                         /*设定鼠标样式*/
}
</style>
<body>
    <div class="container">
        <div class="item">background-clip:padding-box; /*内容在背景裁剪到内边距框 */</div>
        <div class="item">background-clip:border-box;   /*背景被裁剪到边框盒 */ </div>
        <div class="item">background-clip:content-box; /*内容在背景被裁剪到内容框 */</div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>      
        <div class="item"></div>  
        <div class="item"></div>   
         <div class="item"></div>
    </div>
</body>
</html>

综合示例图

精灵图的原理与实现

把网页中一些背景图片整合到一张图片文件中，再利用CSS的”background-image”,”background-repeat”,”background-position”的组合进行背景定位，background-position可以用数字精确地定位出背景图片的位置。

优点：

减少网页的http请求，从而加快了网页加载速度，提高用户体验。
减少图片的体积，因为每个图片都有一个头部信息，把多个图片放到一个图片里，就会共用同一个头信息，从而减少了字节数。
解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名。
更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。

缺点：

在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂。
CSS Sprites在开发的时候，要通过photoshop或其他工具测量计算每一个背景单元的精确位置。
在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片。
精灵图不能随意改变大小和颜色。改变大小会失真模糊，降低用户体验，Css3新属性可以改变精灵图颜色，但是比较麻烦，并且新属性有兼容问题，现在一般用字体图标代替精灵图。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精灵图</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing:border-box;
    }
    .box{
        width: 600px;
        overflow: hidden;
    }
    .box >.item:nth-of-type(1){        
        width: 105px;
        height: 115px;
        background-image: url("image/7.png");
        background-repeat: no-repeat;
        background-position: 0px -272px;    
        float: left;    
    }
    .box >.item:nth-of-type(2){        
        width: 115px;
        height: 113px;
        background-image: url("image/7.png");
        background-repeat: no-repeat;
        background-position: -368px -273px;       
        float: left; 
    }
     .box >.item:nth-of-type(3){        
        width: 110px;
        height: 113px;
        background-image: url("image/7.png");
        background-repeat: no-repeat;
        background-position: 0px -555px;       
        float: left; 
    }
     .box >.item:nth-of-type(4){        
        width: 105px;
        height: 113px;
        background-image: url("image/7.png");
        background-repeat: no-repeat;
        background-position: -479px 0px;       
        float: left; 
    }
    .image{
        width: 400px;
        height: 450px;     
        margin-top: 150px;   
        background-image: url("image/7.png");
        background-repeat: no-repeat;
        border: 1px solid #000;       
        background-size: 400px 450px;
        background-position: 0px 0px;  
    }
</style>
<body>
    <div class="box">
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="item"></div>
          <div class="image"></div>
    </div>
</body>
</html>

示例图

阿里图标的完整引用流程

1. 访问 http://www.iconfont.cn 阿里巴巴图标矢量库中创建账号并登陆。

2. 选择你想要的图标添加到购物车（也就是添加入库）。

3.点击购物车下载代码

4.解压后并更改下载图标文件名

5.引入阿里图标CSS文件。

6.网页中展示阿里图标

实例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="font/iconfont.css" />
    <link rel="stylesheet" href="css/font-icon.css" />
    <script src="js/iconfont.js"></script>
    <title>阿里字体图标的使用方法</title>
  </head>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .footer {
      position: fixed;
      bottom: 0px;
      height: 60px;
      width: 100%;
      background-color: #333;
      display: flex;
      overflow: hidden;
    }
    .footer > a {
      width: 20%;
      flex-flow: row nowrap;
      color: white;
      text-align: center;
      text-decoration: none;
      font-size: 14px;
      padding-top: 5px;
    }
    .footer > a:hover {
      color: yellowgreen;
    }
    .footer > a > span {
      font-size: 30px;
      padding-top: 0px;
      display: block;
    }
    .open {
      width: 150px;
      margin: 0 auto;
      display: block;
    }
    .open > span {
      font-size: 50px;
    }
    .icon {
      width: 50px;      
      vertical-align: -0.15em;
      fill: currentColor;
    }
  </style>
  <body>
    <div class="footer">
      <a href=""><span class="iconfont icon-shouye"></span>首页</a>
      <a href=""><span class="iconfont icon-zuzhijiagou"></span>组织</a>
      <a href=""><span class="iconfont icon-caidan"></span>菜单</a>
      <a href=""><span class="iconfont icon-dingwei"></span>定位</a>
      <a href=""
        ><span class="iconfont icon-yonghu_zhanghao_wode"></span>我的</a
      >
    </div>
    <div class="open">
      <span class="iconfont">&#xe651;</span> 
    </div>
    <div class="open">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-yincang"></use> 
      </svg>
    </div>
  </body>
</html>