This is the 11th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Read not in the middle of the night five drum, work is work by fits and starts. After watching feel have harvest, point a like bai!!

preface

We’ve covered background images and gradiants, but that’s just a drop in the ocean. The backdround-* family is the cornerstone of the ever-changing background image.

Background-repeat: How to tile a background image.

grammar

Single value syntax

Background-repeat: attribute value;

Repeat: Tils the image in two directions. This is the default.

background-image: url('./juejin.png');
background-repeat: repeat;
Copy the code

Repeat -x: Horizontal tiled image

background-image: url('./juejin.png');
background-repeat: repeat-x;
Copy the code

Repeat -y: Vertically tiled image

background-image: url('./juejin.png');
background-repeat: repeat-y;
Copy the code

No-repeat: do not tile, display the image only once

background-image: url('./juejin.png');
background-repeat: no-repeat;
Copy the code

Space: Tiled the image in two directions. Images are not cropped unless individual images are too large to accommodate. If you can hold more than one image, separate them so that the image always touches the edge.

Look carefully, when repeat, the last image is not fully displayed. Using space will automatically increase the spacing of the image, and the last image before is fully displayed.

Round: Tils the image in two directions. Never crop an image unless a single image is too large to accommodate. If multiple images can accommodate the remaining space, squash or stretch them to fill the space. If the remaining image width is less than half, then stretch, if greater, then stretch.

First look at the normal situation, the right side and the bottom are not fully displayed, the right side is obviously less than the general picture, the bottom is significantly greater than half of the picture

 width: 190px;
 height: 110px;
background-image: url('./juejin.png');
background-repeat: repeat;
Copy the code

Now let’s take a look at the effect of using round again. You can see that the right most column is gone, and the bottom row is full.

The two values of grammar

Syntax for two values:

/* background-repeat: horizontal vertical */
   background-repeat: repeat space;
   background-repeat: repeat repeat;
   background-repeat: round space;
}
Copy the code

Background-attachment: Whether the background image is fixed or moves with the scrolling.

Attribute values

scroll

The background image is fixed relative to the element, that is, the background image does not scroll when the element content scrolls, because the background image always follows the element itself. But it will scroll with the element’s ancestor element or form.

fixed

Background image is fixed relative to the form

local

The background image is fixed relative to the element, which means that the background image will scroll as the element rolls with it

Background-position: Indicates the position of the background image.

define

Move the background image (or gradient) within its container.

grammar

Two values

With two values, the first value is the horizontal offset and the second is the vertical offset.

Length value (e.g. 100px 5px)

Percentage (e.g. 50% 5%)

Keywords (e.g. Top right)

Single value

This value is the horizontal offset. The browser sets the vertical offset to center

Three/four values

The syntax is as follows:

background-position: top/bottom/right/bottom 100px top/bottom/right/bottom; // The fourth defaults to 0; background-position: top/bottom/right/bottom 100px top/bottom/right/bottom 20px;Copy the code

Notice that you can’t have bottom and top, or right/bottom, because that’s not normal.

Background-size: sets the size of the background image.

preface

Personally, this is one of the most complex CSS properties because it supports a lot of syntax, but it is also very simple and easy to remember.

grammar

A specific value

auto

By default, the browser automatically calculates the size based on the actual size and aspect ratio of the image

// The size of the background image is 100*123 width: 200px; height: 200px; background-image: url("./bk.jpg"); background-repeat: no-repeat; background-size: auto;Copy the code

cover

Make sure the image always covers the entire container, even if it has to stretch the image or cut off an edge.

// The size of the background image is 100*123 width: 200px; height: 200px; background-image: url("./bk.jpg"); background-repeat: no-repeat; background-size: cover;Copy the code

contain

The browser will maintain the aspect ratio of the image, then stretch it to the right size, eventually ensuring that the width or height is equal to the container, and always displaying the entire image,

// The size of the background image is 100*123 width: 200px; height: 200px; background-image: url("./bk.jpg"); background-repeat: no-repeat; background-size: contain;Copy the code

Here, because the container width and height are the same, the height of the image is greater than the width, so the browser preferentially stretches the height, resulting in a blank width

Single value

Only one value is provided (for example, background-size: 400px), which calculates the width and sets the height to auto. You can use any CSS size unit you like, including pixels, percentages, EM, viewport units, etc.

The double value

If you provide two values, the first sets the width of the background image and the second the height. As with single-valued syntax, you can use any unit of measurement you like.

Multiple picture sizes

grammar
Background-image: image 1, image 2,...... ; Background-size: image 1 size, image 2 size..... ;Copy the code
 width: 200px;
      height: 200px;

      background-image: url("./bk.jpg"),url('./juejin.png');
      background-repeat: no-repeat;
      background-size: 30px 30px, 60px 60px;
Copy the code

Background-orgin: The starting position of the background image

preface

The starting position of the background image in the title is of special significance because this property has no effect on the background color

Border: dashed 5 px rgba (20,81,154,0.5); width: 200px; height: 200px; background-origin: content-box; background-color: aqua; background-size: 250px 250px; */ padding: 20px;Copy the code

The starting position is set to content-box, but it doesn’t take effect

Attribute values

border-box

If you look closely at the image from the border, you will see that the image starts at the top left corner and the entire image is under the border-box.

padding-box

Looking closely at the image from the border as the starting point, you can see that the image starts at the top left padding, and the right and bottom are still in the border area.

content-box

If you look closely at the image from the “content” as the starting point, you will see that the image starts at the top left corner of the content, and the right and bottom are still in the border area.

Background-clip Crop the image and the background color

preface

This property looks very similar to the background-origin property above, with the same value, but the first thing we know from the title is that clip will apply to the background color.

Attribute values

border-box

The entire element

padding-box

content-box

Start cropping from the content area

 background-clip: content-box;
 background-color: aqua;
 background-image: url();
Copy the code