Html5中背景属性的示例分析

这篇文章将为大家详细讲解有关Html5中背景属性的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于成都网站设计、成都网站建设、良庆网络推广、小程序设计、良庆网络营销、良庆企业策划、良庆品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联公司为所有大学生创业者提供良庆建站搭建服务，24小时服务热线：18980820575，官方网址：www.cdcxhl.com

1、背景属性属性：
background-image
background-color
background-repeat
background-position
background-attachment

2、新增属性：
background-size:
background-size:x y;   // 水平 垂直方向的尺寸，像素/百分比/auto/⋯
background-size:cover;  //保持宽高比不变，保证占满盒子，但不保证能看到全部
background-size:contain; //保持宽高比不变，保证看清全图，但可能占不满盒子

多背景：
background-image:url(1.jpg),url(2.jpg);


background-origin  背景区域定位
    border-box： 从border区域开始显示背景
 padding-box： 从padding区域开始显示背景
 content-box： 从content内容区域开始显示背景

background-clip 背景绘制区域
 border-box： 从border区域开始绘制背景
 padding-box： 从padding区域开始绘制背景
 content-box： 从content内容区域开始显示背景

3、背景练习代码部分：

  
    
    
    
    
      *{margin: 0;padding: 0;font-family: "Microsoft yahei";}
      a{text-decoration: none;}
      a img{display: block;border: none;}
      li{list-style: none;}

      .container{
        width: 1200px;
        padding: 20px;
        margin: 10px auto;
        border: 1px dashed #ccc;
      }
      .container h5{padding-bottom: 5px;}
      .container ul{
        width: 1200px;
        overflow: hidden;
      }
      .container ul li{
        float: left;
        width: 331px;
        padding: 20px;
        height: 240px;
        margin-right: 10px;
        border: 10px solid rgba(10,10,10,.3);
        background: url('images/1.jpg') no-repeat;
        background-size: 371px auto;
      }
      .container ul li:last-child{margin-right: 0;}

      .container ul.origin li:nth-child(1){
        background-origin: border-box;
      }
      .container ul.origin li:nth-child(2){
        background-origin: padding-box;
      }
      .container ul.origin li:nth-child(3){
        background-origin: content-box;
      }

      .container ul.clip li:nth-child(1){
        background-clip: border-box;
      }
      .container ul.clip li:nth-child(2){
        background-clip: padding-box;
      }
      .container ul.clip li:nth-child(3){
        background-clip: content-box;
      }

      section .pic{
        width: 600px;
        height: 400px;
        margin: 20px auto;
        border: 1px dashed #ddd;
        background: url('images/3.jpg') no-repeat center center/auto 200px, url('images/2.jpg') no-repeat center center/auto 300px, url('images/1.jpg') no-repeat center center/auto 400px;
      }
      section p{
        font-size: 14px;
        color: #f01010;
      }
    
  
  
    
      

        
1、background-origin: border-box | padding-box | content-box
        
          

          

          

        
      
      

        2、background-clip: border-box | padding-box | content-box
        
          

          

          

        
      
      

        3、多背景:background: url('images/3.jpg') no-repeat center center/auto 200px, url('images/2.jpg') no-repeat center center/auto 300px, url('images/1.jpg') no-repeat center center/auto 400px;

        

        
注释：复合写background-size的时候，一定要用/与其他值隔开。
      
    

  

5、背景练习preview：

关于“Html5中背景属性的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。

标题名称：Html5中背景属性的示例分析
标题路径：http://shouzuofang.com/article/gisiog.html