Detailed examples of background applications of Html5-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Detailed examples of background applications of Html5

零到壹度

Apr 08, 2018 am 10:09 AM

html5 background

This article mainly introduces the background attributes of Html5. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor and take a look.

1. Review of background attributes:
background-image
background-color
background-repeat
background-position
background-attachment

2. New attributes:
background-size:
background-size:x y; // Horizontal and vertical dimensions, pixels/percentage/auto/⋯
background-size :cover; //Keep the aspect ratio unchanged, ensuring that the box is filled, but not guaranteed to be able to see everything
background-size:contain; //Keeping the aspect ratio unchanged, guaranteed to be visible The entire image is clear, but it may not occupy the box

Multiple backgrounds:
background-image:url(1.jpg),url(2.jpg) ;

background-origin Background area positioning
border-box: Display the background starting from the border area
padding-box: starting from padding Area starts to display the background
content-box: starts to display the background from the content area

background-clip background drawing area
border-box: start drawing the background from the border area
padding-box: start drawing the background from the padding area
content-box: start displaying the background from the content area

3. Background exercise code part:

<!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>1、background-origin: border-box | padding-box | content-box</h4>
        <ul class="origin">
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </section>
      <section>
        <h4 style="margin-top: 20px;border-top: 1px dashed #ccc;">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>

Copy after login

5. Background exercise preview:

##6. Gradient:

Linear gradient: linear-gradient (azimuth (left/left top/60deg), starting color | percentage 30%, ending color) ;When using, add the kernel prefix eg:-webkit-linear-gradient, IE9 does not support
Radial gradient: radial-gradient (center point position, diffusion degree, color domain | percentage); from the center Spread out in all directions, eg: -webkit-radial-gradient(50px 50px, starting color, ending color); -webkit-radial-gradient(center, starting color, ending color);
Compatible with lower versions of IE: filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#ff0000',GradientType='1'); 1 means from left to right, 0 means from top to bottom, And the color value can only be a 6-digit hash value

7. Gradient practice code part:

<!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>1、线性渐变：-webkit-linear-gradient(方位,颜色域 | 范围百分比)</h4>
        <ul class="linear">
          <li></li>
          <li></li>
        </ul>
      </section>
      <section>
        <h4>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>3、径向渐变：radial-gradient(中心点位置,扩散程度，颜色域 | 百分比);</h4>
        <ul class="radial">
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </section>
    </p>
  </body>
</html>

Copy after login

8. Gradient preview:

The above is the detailed content of Detailed examples of background applications of Html5. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn