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