實例詳解Html5的背景應用-html教學-PHP中文網

首頁

web前端

html教學

實例詳解Html5的背景應用

零到壹度

Apr 08, 2018 am 10:09 AM

html5背景

這篇文章主要介紹了淺談Html5的背景屬性,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

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 h4{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(&#39;images/1.jpg&#39;) 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(&#39;images/3.jpg&#39;) no-repeat center center/auto 200px, url(&#39;images/2.jpg&#39;) no-repeat center center/auto 300px, url(&#39;images/1.jpg&#39;) no-repeat center center/auto 400px;
      }
      section p{
        font-size: 14px;
        color: #f01010;
      }
    </style>
  </head>
  <body>
    <p class="container">
      <section>
        <h4 id="background-origin-nbsp-border-box-nbsp-nbsp-padding-box-nbsp-nbsp-content-box">1、background-origin: border-box | padding-box | content-box</h4>
        <ul class="origin">
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </section>
      <section>
        <h4 id="background-clip-nbsp-border-box-nbsp-nbsp-padding-box-nbsp-nbsp-content-box">2、background-clip: border-box | padding-box | content-box</h4>
        <ul class="clip">
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </section>
      <section>
        <h4 style="margin-top: 20px;border-top: 1px dashed #ccc;">3、多背景:background: url(&#39;images/3.jpg&#39;) no-repeat center center/auto 200px, url(&#39;images/2.jpg&#39;) no-repeat center center/auto 300px, url(&#39;images/1.jpg&#39;) no-repeat center center/auto 400px;
</h4>
        <p class="pic"></p>
        <p>注释：复合写background-size的时候，一定要用/与其他值隔开。</p>
      </section>
    </p>
  </body>
</html>

5、背景練習preview：

### ######6、漸層：############線性漸層：linear-gradient(方位(left/left top/60deg),起始顏色| 百分比30%，終止顏色) ;使用時加內核前綴eg:-webkit-linear-gradient，IE9不支援##########徑向漸層：radial-gradient(中心點位置,擴散程度，色域| 百分比);由中心向四周發散，eg：-webkit-radial-gradient(50px 50px,起始顏色，終止顏色);-webkit-radial-gradient(center,起始顏色，終止顏色);########## IE低版本相容：filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1');1表示從左到右，0是從上到下，且顏色值只能是6位元雜湊值#########7、漸層練習程式碼部分：###

<!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: 20px auto;
        border: 1px dashed #ccc;
      }
      .container h4{padding-bottom: 5px;}
      .container ul{
        width: 1200px;
        overflow: hidden;
      }
      .container ul.linear li,
      .container ul.filter li{
        width: 600px;
        height: 40px;
        margin: 10px 0;
      }
      .container ul.linear li:first-child{
        background: -webkit-linear-gradient(60deg,#fff 10%, #f00 30%, #0f0 50%, #00f 70%, #000);
      }
      .container ul.linear li:last-child{
        background: -webkit-linear-gradient(left top, rgba(122,156,233,.6) 30%, rgb(255,12,222) 60%, green 80%, #fff);
      }
      .container ul.filter li:first-child{
        background: filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#abcdef&#39;,endColorstr=&#39;#f44add&#39;,GradientType=&#39;0&#39;);
      }
      .container ul.filter li:last-child{
        background: filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#ffffff&#39;,endColorstr=&#39;#000000&#39;,GradientType=&#39;1&#39;);
      }

      .container ul.radial li{
        width: 200px;
        height: 200px;
        margin-right: 20px;
        float: left;
        border-radius: 100%;
      }
      .container ul.radial li:nth-child(1){
        background: -webkit-radial-gradient(center, #fff, #000);
      }
      .container ul.radial li:nth-child(2){
        background: -webkit-radial-gradient(left 50px, #fff, #000);
      }
      .container ul.radial li:nth-child(3){
        background: -webkit-radial-gradient(50px 100px,100px 100px, #fff 80%, #000);
      }
      .container ul.radial li:nth-child(4){
        background: -webkit-radial-gradient(left, #fff 20%, #f00 40%, #0f0 60%, #00f 80%, #000);
      }
    </style>
  </head>
  <body>
    <p class="container">
      <section>
        <h4 id="线性渐变-webkit-linear-gradient-方位-颜色域-nbsp-nbsp-范围百分比">1、线性渐变：-webkit-linear-gradient(方位,颜色域 | 范围百分比)</h4>
        <ul class="linear">
          <li></li>
          <li></li>
        </ul>
      </section>
      <section>
        <h4 id="线性渐变-兼容IE低版本-filter-progid-DXImageTransform-Microsoft-gradient-startColorstr-位哈希值-endColorstr-位哈希值-GradientType">2、线性渐变-兼容IE低版本：filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;6位哈希值&#39;,endColorstr=&#39;6位哈希值&#39;,GradientType=&#39;1／0&#39;);</h4>
        <ul class="filter">
          <li></li>
          <li></li>
        </ul>
      </section>
      <section>
        <h4 id="径向渐变-radial-gradient-中心点位置-扩散程度-颜色域-nbsp-nbsp-百分比">3、径向渐变：radial-gradient(中心点位置,扩散程度，颜色域 | 百分比);</h4>
        <ul class="radial">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </section>
    </p>
  </body>
</html>

###8、漸層preview：########### #######

以上是實例詳解Html5的背景應用的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

html5的div一行可以放两个吗Apr 25, 2022 pm 05:32 PM

html5的div元素默认一行不可以放两个。div是一个块级元素，一个元素会独占一行，两个div默认无法在同一行显示；但可以通过给div元素添加“display：inline;”样式，将其转为行内元素，就可以实现多个div在同一行显示了。

html5中列表和表格的区别是什么Apr 28, 2022 pm 01:58 PM

html5中列表和表格的区别：1、表格主要是用于显示数据的，而列表主要是用于给数据进行布局；2、表格是使用table标签配合tr、td、th等标签进行定义的，列表是利用li标签配合ol、ul等标签进行定义的。

html5怎么让头和尾固定不动Apr 25, 2022 pm 02:30 PM

固定方法：1、使用header标签定义文档头部内容，并添加“position:fixed;top:0;”样式让其固定不动；2、使用footer标签定义尾部内容，并添加“position: fixed;bottom: 0;”样式让其固定不动。

HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制，它只是一个矩形的图形容器，绘制图形必须通过脚本（通常是JavaScript）来完成；开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

html5中不支持的标签有哪些Mar 17, 2022 pm 05:43 PM

html5中不支持的标签有：1、acronym，用于定义首字母缩写，可用abbr替代；2、basefont，可利用css样式替代；3、applet，可用object替代；4、dir，定义目录列表，可用ul替代；5、big，定义大号文本等等。

html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表，一般和li标签配合使用，在dir标签对中通过li标签来设置列表项，语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir，可使用ul标签取代。

html5是什么意思Apr 26, 2021 pm 03:02 PM

html5是指超文本标记语言（HTML）的第五次重大修改，即第5代HTML。HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5由不同的技术构成，其在互联网中得到了非常广泛的应用，提供更多增强网络应用的标准机。

Html5怎么取消td边框May 18, 2022 pm 06:57 PM

3种取消方法：1、给td元素添加“border:none”无边框样式即可，语法“td{border:none}”。2、给td元素添加“border:0”样式，语法“td{border:0;}”，将td边框的宽度设置为0即可。3、给td元素添加“border:transparent”样式，语法“td{border:transparent;}”，将td边框的颜色设置为透明即可。

See all articles