Explain the new background property of CSS3

Time:2020-9-13

Previously, in CSS, we knew several attributes of background color, image, repeat, attachment, position, which are commonly used in CSS. What are the new attributes of CSS3? Look down:

**

New attributes of CSS3: background clip, background origin, background size

1.background-clip

The clipping property of the background is drawn from the specified position.

**

**

2.background-origin

The background origin property specifies the location area of the background image.

**The values of the above two attributes are border box, padding box and content box (it is suggested that we have a good understanding of the box model, so we can see these three attribute values clearly here), or see the following figure:

在这里插入图片描述

Background clip is equivalent to where to start clipping in these three positions to achieve the corresponding effect. See the code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #div1 {
      border: 20px dashed blue;
      padding:40px;
      background: red;
    }

    #div2{
      border: 20px dashed blue;
      padding:40px;
      background: red;
      background-clip: padding-box;
    }

    #div3{
      border: 20px dashed blue;
      padding:40px;
      background: red;
      background-clip: content-box;
    }
  </style>
</head>
<body>

<p>No background clipping (border box is not defined)</p>
<div id="div1 ">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam uam erat volutpat.</p>
</div>

<p>background-clip: padding-box:</p>
<div id="div2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam uam erat volutpat.</p>
</div>

<p>background-clip: content-box:</p>
<div id="div3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam uam erat volutpat.</p>
</div>
</body>
</html>

design sketch:

在这里插入图片描述 在这里插入图片描述

The background origin displays the background in that area and looks at the code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div
    {
      border:1px solid black;
      padding:35px;
      background- image:url ('1 (5). JPG '); / * the picture cannot be displayed and needs to be changed by yourself*/
      background-repeat:no-repeat;
      background-position:left;
    }
    #div1 {
      Background origin: border box; / * setting padding box has the same effect. You can try it yourself*/
    }
    #div2 {
      background-origin: content-box;
    }
  </style>
</head>
<body>
<p>Relative position of background image bounding box</p>
<div id="div1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam uam erat volutpat.</p>
</div>
<p>The relative position of the background image in the content box</p>
<div id="div2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam uam erat volutpat.</p>
</div>
</body>
</html>

effect:

在这里插入图片描述

**

3.background-size

Background size specifies the size of the background image. Before CSS3, the size of the background image was determined by the actual size of the image. Background size in CSS3 allows us to re specify the size of the background image in different environments. You can specify a pixel or percentage size. The size you specify is a percentage of the width and height of the parent element.

Its attribute value:

① Length and background width. The first value sets the width, and the second value sets the height. If only one value is given, the second is set to auto

② . lpercentage calculates the percentage of the area relative to the background. The first value sets the width, and the second value sets the height. If only one value is given, the second is set to “auto”

③ . cover maintains the aspect ratio of the image and zooms the image to the minimum size that will completely cover the background positioning area.

④ . contain maintains the aspect ratio of the image and zooms the image to the maximum size that will fit the background location area.

summary

The above is the new background attribute of CSS3 introduced by Xiaobian. I hope it will be helpful for you. If you have any questions, please leave me a message, and the editor will reply to you in time. Thank you very much for your support to the developeppaer website! If you think this article is helpful to you, welcome to reprint, please indicate the source, thank you!