Use of background styles

1: background-color Set the background color

Just write the background-color attribute followed by the attribute value in the css style

For example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      .box1 {
        width: 300px;
        height: 300px;
        margin: 0 auto;
		background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
  </body>
</html>

2:background-image to set the background image

- Syntax: background-image:url (relative path);

-You can specify the background color and background image for an element at the same time,

This background color will be used as the background color of the background image

-The position of the image in the element

If the background image is larger than the element, the upper left corner of the image will be displayed by default

If the background image is the same size as the element, the entire background image will be displayed

If the background image is smaller than the element size, the background image will be tiled to fill the element by default

3:background-repeat is used to set the repeating method of background images.

Optional values:

Repeat, default value, the background image will repeat in both directions (tiled)

No-repeat, the background image will not be repeated and will be displayed as large as it is

Repeat-x, the background image repeats horizontally

Repeat-y, the background image repeats in the vertical direction

4:background-position can adjust the position of the background image in the element

By default, the background image is displayed in the upper left corner of the element

Optional values:

This attribute can use the two values top right left bottom center

To specify the position of a background image

For example:

Top left Top left

bottom right bottom right

If only one value is given, the second value defaults to center

You can also directly specify two offsets,

The first value is the horizontal offset

- If a positive value is specified, the image will be moved to the right by the specified pixels

- If a negative value is specified, the image will be moved to the left by the specified pixels

The second one is the vertical offset

- If a positive value is specified, the image will be moved downward by the specified pixels

- If a negative value is specified, the image will be moved upward by the specified pixels

5:background-clip

Set the range of background color

Optional values:

Border-box Default value, the background color will appear below the border

The padding-box background will not appear in the border, but will only appear in the content area and padding.

Content-box background only appears in the content area

6:background-origin

Set the origin of the offset calculation of the background image, used in conjunction with the offset

padding-box is calculated from the inner distance

Content-box The offset of the background image is calculated from the content area

Border-box Calculate offset from border

For example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      .box1 {
        height: 500px;
        width: 500px;
        padding: 20px;
        border: 10px red double;
        margin: 0 auto;
        /*设置一个背景颜色*/
        background-color: #bfa;
        /* 设置背景色的范围 */
        background-clip:content-box;
        /* 设置背景图片 */
        background-image: url(./img/gaitubao_小图_png.png);
        /*设置背景图不平铺 */
        background-repeat: no-repeat;
        /*设置背景图的位置 */
        background-position:0px 0px ;
        /* 设置背景图的偏移的原点 */
        background-origin:content-box ;
      }
    </style>
  </head>
  <body>
    <div class="box1">
    </div>
  </body>
</html>

The operation effect diagram is shown in the figure:

7:background-size

Set the size of the picture

Parameters:

The first value: width

Second value: height

If you write only one, the second value defaults to auto

cover The proportion of the image remains unchanged and the elements are covered

contain The proportion of the image remains unchanged and the image is displayed completely

For example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      .box1 {
        height: 500px;
        width: 500px;
        border: 10px red double;
        background-image: url(./img/大图2.webp);
        background-repeat: no-repeat;
        /* 设置图片的大小 */
        background-size:cover;
      }

    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2">
    </div>
    </div>
  </body>
</html>

Rendering:

You can clearly see that the picture covers the elements and appears outside the border.

And: background-size contain the image proportion remains unchanged and the image is displayed completely.

For example:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }
      .box1 {
        height: 500px;
        width: 500px;
        border: 10px red double;
        background-image: url(./img/大图2.webp);
        background-repeat: no-repeat;
        /* 设置图片的大小 */
        background-size:contain;
      }

    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2">
    </div>
    </div>
  </body>
</html>

Rendering:

The proportions of the image remain unchanged and are displayed completely, but they do not fill the entire box.

Use of background styles

Guess you like