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、背景练习代码部分：

<!DOCTYPE HTML>
<html>
  <head>
    <title>your title name</title>
    <meta charset="utf-8">
    <meta name="Author" content="Wilson Xu">
    <style type="text/css">
      *{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;
      }
    </style>
  </head>
  <body>
    <p class="container">
      <section>
        <h5>1、background-origin: border-box | padding-box | content-box</h5>
        <ul class="origin">
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </section>
      <section>
        <h5 style="margin-top: 20px;border-top: 1px dashed #ccc;">2、background-clip: border-box | padding-box | content-box</h5>
        <ul class="clip">
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </section>
      <section>
        <h5 style="margin-top: 20px;border-top: 1px dashed #ccc;">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;
</h5>
        <p class="pic"></p>
        <p>注释：复合写background-size的时候，一定要用/与其他值隔开。</p>
      </section>
    </p>
  </body>
</html>

5、背景练习preview：

Html5中背景属性的示例分析

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

网站名称：Html5中背景属性的示例分析
网址分享：https://www.cdcxhl.com/article6/gisiog.html

成都网站建设公司_创新互联，为您提供网站制作、面包屑导航、做网站、网站维护、服务器托管、响应式网站

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容