As a front-end developer, background is a constant part of development. Big to the theme background of the entire site, small to the background of a button. CSS background property is almost every day development encounter, in most cases we will only use solid color background or image background. If you want to make your content look more interesting, this article lets you develop cool backgrounds using pure CSS.

Prior to the start

Before we begin, please answer the following questions. If you can answer all the questions correctly, you have a good understanding of background properties.

1. What is the default shape for radial gradient?

A: Prototype B: oval

2. backgroundAttribute with multiple values, which value is on the top layer?

A: the first value B: the last value

3. background: green, linear-gradient(red, pink); What is the effect?

A: green background B: pink and red gradient background C: no background

4. WhenbackgroundHow do YOU specify the size of each layer background when the property has multiple values?

Based on the background

First of all, let’s review the basic background. The simplest one is a solid color background:

background: pink;
Copy the code

Linear gradient, of course you can also customize the direction:

.linear {
    background: linear-gradient(red, pink);
}
.linear1 {
    background: linear-gradient(145deg, red 20%, pink);
}
Copy the code

Radial gradient

background: radial-gradient(red, pink);
Copy the code

Angular gradient

background: conic-gradient(red, pink);
Copy the code

Base Background extension

There’s nothing left to say about a solid color background, except to change the color.

Linear background

For linear backgrounds, we can set multiple colors and specify where to draw each color:

background: linear-gradient(-50deg.#F7A37B.#F7A37B.#FFDEA8.#FFDEA8.#D0E4B0.#D0E4B0.#7CC5D0.#7CC5D0.#00A2E1.#00A2E1.#0085C8.#0085C8);
Copy the code

background: linear-gradient(-50deg.#F7A37B.#F7A37B.#FFDEA8.#FFDEA8 20%.#D0E4B0.#D0E4B0.#00A2E1 20%.#00A2E1.#0085C8.#0085C8
);
Copy the code

It now appears that each color has a transition effect between them. By controlling where each color is drawn, the transition effect can be eliminated:

background: linear-gradient(-50deg.#F7A37B.#F7A37B 10%.#FFDEA8 10%.#FFDEA8 20%.#D0E4B0 20%.#D0E4B0 30%.#7CC5D0 30%.#7CC5D0 40%.#00A2E1 40%.#00A2E1 50%.#0085C8 50%.#0085C8 60%
);
Copy the code

But blue is a big part of it, and it’s not pretty, and a set of colors can be done satisfactorily by using a repetitive background.

background: repeating-linear-gradient(-50deg.#F7A37B.#F7A37B 1em.#FFDEA8 1em.#FFDEA8 2em.#D0E4B0 2em.#D0E4B0 3em.#7CC5D0 3em.#7CC5D0 4em.#00A2E1 4em.#00A2E1 5em.#0085C8 5em.#0085C8 6em
);
Copy the code

Radial background

The repeated background is equally durable in the radial direction

background: repeating-radial-gradient(
	#F7A37B.#F7A37B 1em.#FFDEA8 1em.#FFDEA8 2em.#D0E4B0 2em.#D0E4B0 3em.#7CC5D0 3em.#7CC5D0 4em.#00A2E1 4em.#00A2E1 5em.#0085C8 5em.#0085C8 6em
);
Copy the code

If you want the pattern to be a prototype, specify circle as the first parameter for repeating-radial-gradient.

background: repeating-radial-gradient(
	circle,
	#F7A37B.#F7A37B 1em.#FFDEA8 1em.#FFDEA8 2em.#D0E4B0 2em.#D0E4B0 3em.#7CC5D0 3em.#7CC5D0 4em.#00A2E1 4em.#00A2E1 5em.#0085C8 5em.#0085C8 6em
);
Copy the code

Adjust the first parameter and you can get different patterns

The first parameter, in addition to specifying the type of the garden, also defines the gradient size and position:

background: repeating-radial-gradient(100% 100% at 30% 30%.#F7A37B.#F7A37B 1em.#FFDEA8 1em.#FFDEA8 2em.#D0E4B0 2em.#D0E4B0 3em.#7CC5D0 3em.#7CC5D0 4em.#00A2E1 4em.#00A2E1 5em.#0085C8 5em.#0085C8 6em);
Copy the code
background: repeating-radial-gradient(100% 200% at 40% 40%.#F7A37B.#F7A37B 1em.#FFDEA8 1em.#FFDEA8 2em.#D0E4B0 2em.#D0E4B0 3em.#7CC5D0 3em.#7CC5D0 4em.#00A2E1 4em.#00A2E1 5em.#0085C8 5em.#0085C8 6em);
Copy the code

The definition is size at positon

  • position: Defines the center of the circle. The default value iscenter, can be set totop 、bottom 、left,right, can also be represented by coordinates
  • size: Defines the gradient size, such as100% 200%“, it means to keep horizontally, to double vertically. So the second image above, which was originally an oval, now appears as a circle.

Key knowledge points

Size should not be misinterpreted as a scaling scale, the above 100% 200% and 5% 10% effect is the same, not relative to the original size of the scale, the size is specified when the color is set.

If you set it to 500% 500%, the effect is the same as if the value was not set, and it should be: in the direction of the larger value (the first value is landscape when large, the second value is portrait when large), magnify the larger value/the smaller value multiple.

Angular gradient

Set the div’s rounded corners to 50%, with the same color at the beginning and end, and you’ll have a color palette

background: conic-gradient(red, orange, yellow, green, teal, blue, purple, red);
border-radius: 50%;
Copy the code

Combination of background

Background property can be set to multiple backgrounds at the same time, multiple backgrounds can be superimposed on each other to create a fantastic pattern.

There are two things to note when creating this type of background:

  • throughbackground-sizeProperty to set the size of each background;
  • Clever use of transparent colortransparent

Taking the second background as an example, it works as follows:

Step 1: Borders

This can be done using a background, and it’s easier to use border and box-shadow

border-radius: 50%;
border: 1px solid #00caf5;
box-shadow: 0 0 0 10px rgba(255.255.255.0.8) inset;
Copy the code

Step 2: The ball

Set the width and height of the background to 30px through background-size, and then draw the ball through the radial-gradient. The blue color is from the center of the circle to a radius of 9px, and the area greater than 10px is transparent.

background: radial-gradient(#00caf5 9px,transparent 10px);
background-size: 30px 30px;
Copy the code

Step 3: Ring

Mirror gradient is also used, which is the same as the principle of drawing a ball. The center of the circle can be the ball of the previous step, and there are more rings outside. Here, the circle process needs to be repeated infinitely, repeating-radial-gradient is needed.

background: repeating-radial-gradient(#00caf5 0.#00caf5 4px,transparent 5px,transparent 20px.#00caf5 21px.#00caf5 25px,transparent 26px, transparent 50px);
background-size: 90px 90px;
Copy the code

The four-pointed star in the middle is due to the fact that the background is only 90px wide and high, which is partially hidden, so that the four corners of each repeated background are joined together to form the view.

Step 4: Composition

Finally, merge the above several backgrounds, and separate the values of multiple background and background-size with, and the values of background and background-size correspond one by one. If the number of background values is greater than background-size, the excess will be polled from the first background-size.

pointhere”> < p style =” max-width: 100%; clear: both; min-height: 1em;The front thin bamboo garden], reply to”The CSS background“Get all source code for this issue;

Key points:

  1. whenbackgroundWhen there are multiple values, the previous value takes precedence, meaning that the previous background overrides the later one.

Here’s an example:

background: radial-gradient(#00caf5 9px,transparent 50px), pink;
Copy the code
background: linear-gradient(pink, pink), radial-gradient(#00caf5 9px,transparent 10px);
Copy the code

If the first value needs to be a solid color background case, cannot use color directly expressed, otherwisebackgroundProperty setting value is invalid, my method is to use linear gradient instead.

I also thought about the reason later, because the previous value has a higher priority, if the first value is a solid color background, the effect of the later value cannot be displayed, so it is the same as directly setting a solid color value as the background.

background: linear-gradient(pink, pink), radial-gradient(#00caf5 9px,transparent 10px);
/* is equivalent to */
background: pink;
Copy the code
  1. Can be achieved bybackground-sizeSet the size of each layer of background, if there are now 4 layers of background, butbackground-sizeWith only two values set, how big should the third and fourth backgrounds be?
background:linear-gradient(-30deg, transparent, transparent 45%.rgb(217.255.0), transparent 55%, transparent 100%),
    linear-gradient(30deg, transparent, transparent 45%.rgb(255.115.0), transparent 55%, transparent 100%),
    radial-gradient(rgb(255.192.218),rgb(255.192.218) 30%, transparent 20%),
    radial-gradient(#0085C8 , #0085C8 50%,transparent 50%);
    background-size: 50px 50px.25px 25px;
Copy the code

Look directly at the effect:

It can be seen that the size of the third background is 50px 50px, and the size of the fourth background is 25px 25px. It can be found that the NTH %background-size value of the NTH background is background-size.

Mixed background

Speaking of blending backgrounds, we have to introduce another CSS property mix-blending-mode blending mode. Blending mode is most commonly found in Photoshop and is one of the most powerful features in Photoshop. In CSS, we can use blend mode to mix multiple layers to create a new effect.

Overlay two linear gradient backgrounds and see what you get:

Not surprisingly, because the background is opaque, the background in front overrides the background behind.

Now add mix-blending-mode: multiply to it and see what it looks like:

When the two backgrounds overlap, some wonderful effects will be produced. The colors of the overlapping parts of the background are superimposed together. The complete code is as follows:

 div {
      display: inline-block;
      position: relative;
      width: 240px;
      height: 240px;
      border: 2px solid # 666;
      box-shadow: 1px 1px 4px 2px #aaa;
      margin: auto;
      color: # 333;
      text-align: center;
      font-size: 16px;
      line-height: 520px;
    }
    div::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background:
        repeating-linear-gradient(#F7A37B.#F7A37B 1em.#FFDEA8 1em.#FFDEA8 2em.#D0E4B0 2em.#D0E4B0 3em.#7CC5D0 3em.#7CC5D0 4em.#00A2E1 4em.#00A2E1 5em.#0085C8 5em.#0085C8 6em);
      animation: move 5s infinite linear;
      mix-blend-mode: multiply;
    }

    div::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      background:
        repeating-linear-gradient(#F7A37B.#F7A37B 1em.#FFDEA8 1em.#FFDEA8 2em.#D0E4B0 2em.#D0E4B0 3em.#7CC5D0 3em.#7CC5D0 4em.#00A2E1 4em.#00A2E1 5em.#0085C8 5em.#0085C8 6em);
      background-size: 30px 30px;
    }
Copy the code

Of course, you can use different blending modes to achieve some different effects:

Radial gradient can also be used:

You can also use a variety of combinations to get a variety of backgrounds by changing colors, sizes, gradients, blending modes, etc.

Mix-blending-mode can also be used to create cool effects, such as bug art. If you are interested, check out this article on CSS bug Art.

Random background

After each refresh, the background is randomly generated preview 1 preview 2

To achieve this background, you need to make use of a powerful CSS pattern WEB component called CSS-doodle, which will be covered in an article later.

Pay attention to the public number [front-end xiao Yuan], reply to “CSS background” to get all the source code of this period;

The dynamic background

All of the backgrounds above are static, so now we’re going to animate the background.

This time let’s create a few more different types of gradient backgrounds

Stack them up using different blend modes

That’s not all. Now let’s get the background moving

Use it for every backgroundhue-rotateFilter, thus changing the hue value of each layer of background, using the blend mode to overlay each other, you can see the chaotic glare effect.

@keyframes move {
    0% {
        filter: unset;
    }

    100% {
        filter: hue-rotate(360deg); }}Copy the code

Of course, we can also use CSS-Doodle to randomly generate glare, and each click will have a different effect. Online experience

Using a mask

As the name suggests, the mask is translated into a mask. In CSS, the mask attribute allows the user to hide part or all of an element’s visible area by masking or cropping a specific area of the image.

Masks provide the ability to control element transparency at the pixel level, similar to the effect of alpha transparent channels in PNG24 or PNG32 bits.

Now there is this pattern:

background: radial-gradient(circle,#00caf5 5px,transparent 0) 0 0;
background-size: 10px 10px;
Copy the code

There is a mask like this, which uses the background instead:

background: linear-gradient(transparent 20%.rgb(29.26.26) 30%, transparent);
Copy the code

Now overlay them and define a rule like this: mask the white part as opaque and the black part as transparent to get something like this

Outside the chain picture archiving failure, the source station might be hotlinking prevention mechanism, proposed to directly upload picture preserved (img – gPnuZNC0-1615253124602) (www.dengzhanyong.com/PHP/images/.)”

This mask is a mask and the complete code is as follows:

background: radial-gradient(circle,#00caf5 5px,transparent 0) 0 0;
background-size: 10px 10px;
mask: linear-gradient(transparent 20%.# 000 30%, transparent);
Copy the code

You can make some completely unimaginable patterns with masks, even when you look at the source code, you can’t imagine what it will look like in the end.

Outside the chain picture archiving failure, the source station might be hotlinking prevention mechanism, proposed to directly upload picture preserved (img – txlASYLk – 1615253124602) (www.dengzhanyong.com/PHP/images/.)”

Unfortunately, mask is not very compatible and is currently only supported by Firefox and Edge.

Also, with CSS-Doodle you can make a kaleidoscope of all kinds of effects: preview

usebox-shadow

In addition to using the background property, we can also use shadows to create backgrounds.

We use div to make a button, but first we use background to make a background:

display: inline-block;
background: seagreen;
color: #fff;
padding: 0 10px;
line-height: 2em;
border-radius: 3px;
Copy the code

To give the button a third dimension, now add shadows and highlights to it:

box-shadow: 2px 2px 3px # 555;
background: linear-gradient(#fff, transparent 5px), linear-gradient(to right, #fff, transparent 5px), radial-gradient(seagreen 0%,seagreen 100%);
Copy the code

All of the above effects can be implemented using box-shadow:

box-shadow: 2px 2px 3px # 555.2px 2px 3px #fff inset, 100px 100px seagreen inset;
Copy the code

As you can see, this approach is much simpler, requiring only one line of code, with the clever use of an inner shadow as a background.

box-shadow: 2px 2px 3px # 555.2px 0px 10px 5px red inset, 100px 100px yellow inset;
Copy the code
box-shadow: 2px 2px 3px # 555, -5px -5px 10px 1px #fff inset, 0 0 13px 1px rgb(0.255.170) inset, 100px 100px yellow inset;
Copy the code

withbackgroundProperties have one thing in common whenbox-shaodowWhen there are multiple values, the previous value is on a higher layer.

conclusion

After learning in this paper, we know that we can create some unexpected effects by using mix-blending-mode, box-shadow, filter and mask instead of being limited to solid color background or gradient background.

While some attributes are not currently compatible, as CSS3 grows, replacing some image resources with background will work better. Give it a try with your fingers.

Finally, if you think my article is helpful to you, then one key three even support it!

Welcome to pay attention to my public number [front-end xiao Yuan], not miss my every push

Come and experience my little program [xiao Ju], stick to punching in every day, not only gain knowledge, but also have bonus waiting for you to get oh

If there is any question about the content of the article, please correct it, thank you