Shulou(Shulou.com)06/01 Report--

This article mainly explains "what are the background knowledge points of CSS". Friends who are interested may wish to have a look. The method introduced in this paper is simple, fast and practical. Next, let the editor take you to learn "what are the background knowledge points of CSS"?

Introduction

The CSS background attribute is an abbreviation for the following properties.

Background clip, background color, background image, background source, background location, background repetition, background size and background attachment.

In this article, I will focus on background-image,background-position and background-size. Are you ready? Let's sneak in!

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

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

In the figure above, background-position is followed by background-size. And vice versa! In other words, the following CSS is invalid:

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

Position the element relative to the positioning layer set by the background-origin property. I like the flexibility of background-position. It has several ways to locate elements:

Key value (top,right,bottom,left,center)

Percentage value. For example: 50%

Length value. For example: 20px 2.5rem

Edge offset value. For example: top 20px left 10px

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

It is worth mentioning that the value top left is the same as the same left top. Browsers are smart enough to determine which one is for the x-axis and which is for the y-axis.

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

The name of the attribute is self-evident. The size consists of width and height. For this background-size attribute, the first is width and the second is height.

You don't have to use two values. You can use a value that will be used for width and height.

Disclaimer: it is worth mentioning that the CSS specification states: "if only one value is given, the second will be considered automatic." However, this feature has not been implemented in the browser and will change in the future. Thank you for your letter from Ilya Streltsyn.

Now that I know the basics of how CSS background works, let's explore how to use multiple backgrounds.

Multiple backgrounds

Background properties can have one or more layers, separated by commas. If multiple backgrounds are of the same size, one of them will overwrite the other.

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

When multiple backgrounds are placed, and one of them occupies the full width and height of its parent, the stacking order occurs. Deciding when to stack backgrounds on top of each other can be a bit confusing. Consider the following example.

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

We have a plate and a table. What results do you expect from the above CSS? Which comes first? Plate or table?

The answer is the table. In CSS, the first background can be stacked on the second background, the second background can be stacked on the third background, and so on. By replacing the background order, the results will be as expected.

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

Suppose you wanted to draw two rectangles with a CSS background. What would you do? Fortunately, using CSS gradients is very easy. When linear-gradient has the same color stop, the result will be solid color. That's all!

. background: linear-gradient (# 3c88Ec, # 3c88Ec)}

We can take this approach further by exploring a very useful use case for CSS gradients. Stay tuned for the use case section!

Superposition of use cases and examples

In general, you may need to place an overlay at the top of the hero section to make the text easy to read. You can easily do this by stacking two backgrounds.

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

Even better, we can apply the light color to the element using the same method as above. Consider the following:

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 possibility of drawing with CSS gradients is infinite. You can use linear-gradient or radial-gradient more. For this basic example, I'll explain how to draw a laptop.

Let's disassemble the laptop and see what gradient we need to use.

Note that when decomposing a laptop project, it is now easier to think about how to implement it into multiple CSS backgrounds. If you notice, I created two circles to act as fillets of the body, because there is no direct way to do the gradient with the rounded edges.

And then there are the drawings. The first step is to define each gradient as a CSS variable and its size. I like to use the CSS variable because it reduces the complexity of the code and makes it simpler and easier to read. When I'm done, I'll go to the steps to place them.

: root {--case: linear-gradient (# 222,# 2222);-- 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 the gradients and their size, the next step is to place them. Consider the following picture for a better visual interpretation.

Show reflection

As mentioned earlier, you should first define the elements that need to be at the top. In our case, the display reflection should be the first gradient.

Liquid crystal display

The display is located in the center of the x-axis and in the position of the 6pxy axis.

Plastic box

The housing is located below the display screen, in the center of the x-axis, and on the 0pxy axis.

body

That's the most interesting component in the graph. First, the body is a rectangle with two circles on each side (left and right).

The 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, # 8850%, 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 1pxscape background /} mixed multiple backgrounds

It can be exciting when you can mix multiple backgrounds. The simplest use case I can explain is to desaturate the image. Consider that your background-image has one in CSS and wants to convert it to black and white.

Background: linear-gradient (# 000,# 000), url ("landscape.jpg") center/cover; background-blend-mode: color;} so far, I believe you have a deeper understanding of "what are the background knowledge points of CSS". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.