In-depth analysis of the various backgrounds, usage scenarios and techniques of CSS

This article has been included on GitHub https://github.com/qq449245884/xiaozhi. The article has been categorized, and a lot of my documents and tutorial materials have been sorted out.

CSS background is one of the most commonly used CSS properties. However, not all developers are aware of using multiple contexts. This period of time has been focused on using a variety of background scenes. In this article, we’ll take a detailed look at the background-image property and use graphics to explain how to use multiple backgrounds and their practical benefits.

If you still know about CSS background properties, you can go to MDN to check the relevant knowledge first.

introduce

The CSS background property is a shorthand for the following properties:

background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size and background-attachment.

For this article, we’ll focus on background-image , background-position , and background-size . Are you ready? Let’s get started!

Consider the following example:

.element {
  background: url(cool.jpg) top left/50px 50px no-repeat;
}

The background image is located in the upper left corner of the element and has a size of 50px * 50px . It is important to understand and remember the order of position and size.

In the image above, background-position is followed by background-size . Their order cannot be changed, otherwise it will be invalid, as shown below:

.element {
	/* Warning: Invalid CSS */
	background: url(cool.jpg) 50px 50px/top left no-repeat;
}

Background Position

The element's positioning is relative to the positioning layer set by background-origin property. I like the flexibility of background-position , which allows for multiple ways to position an element:

• Keyword values ​​( top , right , bottom , left , center )
• Percentage value, such as: 50%
• Length value, such as: 20px , 2.5rem
• Edge offset value, such as: top 20px left 10px

The coordinate system starts from the upper left corner and the default value is 0% 0% .

It is worth mentioning that the value of top left is the same as the value of left top . The browser is smart enough to figure out which of these to use for x axis and which to use for y axis.

.element {
	background: url(cool.jpg) top left/50px 50px no-repeat;
	/* The above is the same as the below*/
	background: url(cool.jpg) left top/50px 50px no-repeat;
}

Background Size

For background-size property, the first is width and the second is height .

Instead of using two values, you can use one value, which means that both width and height are the same.

Now that I understand how CSS background work, let’s explore how to use multiple backgrounds.

Multiple backgrounds

background property can have one or more layers, separated by commas. If multiple backgrounds are the same size, one will cover the other.

.element {
	background: url(cool.jpg) top left/50px 50px no-repeat,
	url(cool.jpg) center/50px 50px no-repeat;
}

In the image above, we have two background layers. Every location is different. This is the basic usage of multiple contexts, let's look at a more advanced example.

Placement Order

When placing multiple backgrounds, and one of them takes up the full width and height of its parent, the order of placement may be a bit messed up. Consider the following example:

.hero {
  min-height: 350px;
  background: url('table.jpg') center/cover no-repeat,
    url('konafa.svg') center/50px no-repeat; 
}

We have a picture of a plate and a table, which one do you think will be on top?

The answer is a table . In CSS, the first background can be placed over the second background, the second background can be placed over the third background, and so on. By replacing the order of the backgrounds, you get the expected result.

Use cases and examples

Mask layer

Often, we may want to place a mask layer on top of a certain section to make the text easier to read. This can be easily done by stacking two backgrounds.

.hero {
	background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),
    url("landscape.jpg") center/cover;
}

The good thing is that we can apply tint to elements using the same method as above. Consider the following:

.hero {
	background: linear-gradient(135deg, rgba(177, 234, 77, 0.25), rgba(69, 149, 34, 0.25),
    url("landscape.jpg") center/cover;
}

Drawing with CSS

The possibilities of using CSS gradients are endless. You can use linear-gradient or radial-gradient etc. Next, let's take a look at how to use it to draw laptops.

Tear down the laptop and see what gradient we need to use.

When dissecting the laptop, it's easier to think about how to achieve it using multiple CSS backgrounds.

Next comes the drawings. The first thing is to define each gradient as a CSS variable and its size. I like using CSS variables because it reduces the complexity of your code, making it cleaner and easier to read.

:root {
  --case: linear-gradient(#222, #222);
  --case-size: 152px 103px;

  --display: linear-gradient(#fff, #fff);
  --display-size: 137px 87px;

  --reflection: linear-gradient(205deg, #fff, rgba(255, 255, 255, 0));
  --reflection-size: 78px 78px;

  --body: linear-gradient(#888, #888);
  --body-size: 182px 9px;

  --circle: radial-gradient(9px 9px at 5px 5.5px, #888 50%, transparent 50%);
  --circle-size: 10px 10px;
}

Now that we have defined our gradients and their sizes, the next step is to place them. Consider the following image for a better visual explanation.

Display image

As mentioned before, the elements that need to be at the top should be defined first. In our case, the displayed image should be the first gradient.

Display LCD

The display is located at the center of x axis and 6px from the y-axis.

Display housing

The shell is located below the display, at the center of the x-axis and at a distance of 0px from the y-axis.

main body

This is the most interesting component of the graph. First, the main body is a rectangle with two circles on each side (left and right).

Final Result

:root {
  --case: linear-gradient(#222, #222);
  --case-size: 152px 103px;
  --case-pos: center 0;

  --display: linear-gradient(#fff, #fff);
  --display-size: 137px 87px;
  --display-pos: center 6px;

  --reflection: linear-gradient(205deg, #fff, rgba(255, 255, 255, 0));
  --reflection-size: 78px 78px;
  --reflection-pos: top right;

  --body: linear-gradient(#888, #888);
  --body-size: 182px 9px;
  --body-pos: center bottom;

  --circle: radial-gradient(9px 9px at 5px 5.5px, #888 50%, transparent 50%);
  --circle-size: 10px 10px;
  --circle-left-pos: left bottom;
  --circle-right-pos: right bottom;
}

.cool {
  width: 190px;
  height: 112px;

  background-image: var(--reflection), var(--display), var(--case), var(--circle), var(--circle), var(--body);

  background-size: var(--reflection-size), var(--display-size), var(--case-size), var(--circle-size), var(--circle-size), var(--body-size);

  background-position: var(--reflection-pos), var(--display-pos), var(--case-pos), var(--circle-left-pos), var(--circle-right-pos), var(--body-pos);

  background-repeat: no-repeat;

  /*outline: solid 1px;*/
}

Mixed backgrounds

It’s exciting when you mix multiple backgrounds. Consider you have a background image in CSS and you want to turn it into black and white.

.hero {
  background: linear-gradient(#000, #000),
  url("landscape.jpg") center/cover;
  background-blend-mode: color;
}

Original: https://css-tricks.com/css-basics-using-multiple-backgrounds/

There is no way to know in real time what bugs may exist after the code is deployed. In order to solve these bugs afterwards, a lot of time was spent on log debugging. Here I would like to recommend a useful bug monitoring tool, Fundebug.

This concludes this article on an in-depth analysis of the various backgrounds, usage scenarios and techniques of CSS. For more relevant content on the various backgrounds and usage scenarios of CSS, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future!