This is the 14th day of my participation in the August Text Challenge.More challenges in August

Title/ CSS Background&Gradient complete guide #Archives009

Order: Those of you who know CSS will always have a general idea of the background property. But you probably can’t (don’t pretend!). For example, can you write CSS’s 6 tween functions by hand? Do you know what space and round do in BG-repeat? Can you implement “arbitrary gradient” in AI with pure CSS? This article sorted out various weird uses of Background and Gradient attributes of CSS in detail. Of course, taking care of the new will be more complete and basic, advanced developers can only care about the content you need, not sequential reading.

Introduction: one of the most complete CSS background, gradient tutorial!

Note: The background property is conveniently shortened to BG in this article, but not in CSS.

The Tag/Background is introduced

The CSS property Background can create a variety of colorful backgrounds for elements on a web page. Not only can you create six gradients, but you can also overlay multiple backgrounds on an element, which is useful for complex effects.

Here’s some code:

element {
    background:
        url(mi_logo.svg)    /* image */
        top center / 20px 20px /* position / size */
        no-repeat /* repeat */
        fixed /* attachment */
        padding-box /* origin */
        content-box /* clip */
        orange /* color */
} 
Copy the code

Background attributes can also be superimposed:

ele {
   background: cornflowerblue, url("ruok.svg");
}
Copy the code

Properties are separated by Spaces, and backgrounds are separated by commas.

Tag/ Background related attributes

  1. background

    This property is background-clip, background-color, background-image, background-origin, background-position, background-repeat, CSS shorthand for background-size and background-attachment properties. The usage of each property is described below.

    Value:

    background: bg-color bg-image bg-position/bg-size bg-repeat bg-origin bg-clip bg-attachment, (another-bg); Bg-position /bg-size/bg-position/bg-size */Copy the code

  2. background-color

    Specifies the background color with the value
    and the default is transparent.

  3. background-image

    Specifies a background image, which can be a URL (…) (the resource address of the image, inserted as the background image), can be
    (which can be interpreted as a solid color image), or you can use the CSS gradient function (a gradient image).

    CSS gradients are really complicated to use. For ease of reading, the methods and functions are described in ->> Details of this article.

  4. background-position

    Specifies the position of the background image. The default is center, relative to background-origin.

    Value:

    /* The unit can be <length>, <percentage> or keyword. The negative value indicates the offset in the opposite direction. */ /* 50px; /* One value: the value of the x coordinate, the other value is center(default)*/ background-position: top; /* One value (keyword): specifies the value of the keyword, and another value is center.*/ background-position: 100px 75%; /* Background-position: bottom 25% right; /* background-position: bottom 25% right; /* Three values (keyword value keyword): specifies the distance from the margin (for example, 25% from the bottom, to the right). */ background-position: top right 50px; /* Three values (keyword values): specifies the distance from the edge (in this case, 50px to the right, close to the top). */ background-position: bottom 25% left 50px; /* Four values (keyword values): specifies the distance from the margin (in this case 25% from the bottom, 50px from the left).*/Copy the code

  5. background-size

    Specifies the size of the background image. Default is auto.

    Value:

    /* The unit can be <length>, <percentage>, or keyword */ /* Keyword: Contain (scale), cover(scale), auto(scale)*/ background-size: 50px; contain(scale), cover(scale), auto(scale)*/ background-size: 50px; /* One value: auto(default); background-size: auto 5em; background-size: auto 5em; /* Two values: the width and height of each image */Copy the code

  6. background-repeat

    Specifies the method of repeating the background image. The default value is repeat.

    */ background-repeat: repeat; /* background-repeat: repeat; /* Repeat the background image as needed to cover the entire background area. */ background-repeat: space; */ background-repeat: space; /* Repeat the background image to cover the entire background area, but do not crop the image. Edge images are fixed to edges, and white space is evenly distributed between images. Background-position is ignored unless only one image can be displayed unclipped. Clipping occurs only if the image is so large that there is not enough space to display an image in its entirety. /* Repeat the background image and scale it to fill the space, there will be no gaps. /* background-repeat: space round; / / background-repeat: space round; Background-repeat: repeat- X; background-repeat: repeat- X; /* Background-repeat: repeat-y; /* background-repeat: repeat-y; /* Same as no-repeat repeat */Copy the code

  7. background-origin

    Specifies the starting position of the background image. Default is padding-box. In particular, when the background-attachment property value is fixed, the property will be ignored.

    Value:

    background-origin: border-box; /*背景图片左上角坐标位于 border-box 位置*/
background-origin: padding-box; /*背景图片左上角坐标位于 padding-box 位置*/
background-origin: content-box; /*背景图片左上角坐标位于 content-box 位置*/
Copy the code

    See Also: a LiveDemo tympanus.net/codrops/css…

    Bg – origin and bg – clip difference (screenshot) www.cnblogs.com/shytong/p/5…

  8. background-clip

    Specifies to which box the background (image and color) extends, the default being border-box.

    Value:

    background-clip: border-box; /* Extend background to border-box*/ background-clip: padding-box; /* Background-clip: content-box; /* Content-box */ background-clip: text; /*(Experimental) background text */Copy the code

  9. background-attachment

    Specifies how the background image position should be scrolled within the element (fixed or along with the element). The default is scroll.

    Value:

    background-attachment: fixed; /* Indicates that the background is fixed relative to the viewport. Even if an element has a scrolling mechanism, the background does not scroll with the content of the element. /* Indicates that the background is fixed relative to the content of the element. If an element has a scroll mechanism, the background will scroll along with the element's content, and the draw and position areas of the background are relative to the scrollable areas rather than the borders that contain them. /* Indicates that the background is fixed relative to the element itself, rather than scrolling with its content (which is valid for element borders)*/Copy the code

->> Details

background-image – The CSS gradientfunction

Preface: According to the topic CSS Gradient can be written alone, so write a preface independently.

Everyone knows a little bit about CSS tweening, but it’s so complicated that most people just scratch the surface (for example, only two basic tweening methods).

But what makes you better than the average front end is if you know something that no one else knows! This CSS gradient is also very common in UI design, and UI designers are likely to do magic and complicated gradients just to torture the front end.

For example, if you want to recreate a design in real life, gradients in Adobe Illustrator are not easy at all.

In the image above, Adobe uses the Gradient Type of “Arbitrary Gradient”.

If you want to implement this arbitrary gradient design, you will probably say: This gradient is not in a line (black and white everywhere), it can’t be achieved with normal gradient.

So the solution might be to use AI to export a PNG with gradients (which is what AI does when exporting SVG by default) and then use BG-image (or BG-Clip: text) to add to the front end.

It’s not that this approach is bad, as long as the results are achieved, any approach is OK.

But I feel that the learning attitude is not very good. So now figure it out!

As you can probably guess by now, “any gradient” is possible with pure CSS. ->> Look below!

background: radial-gradient(ellipse at right, #f18a89, transparent),
            radial-gradient(ellipse at bottom, #e16259, transparent), 
            radial-gradient(ellipse at left, #abdcef, transparent), 
            linear-gradient(#fffefc, transparent);
Copy the code

Ok, so what does it do?

Is there an inside smell? Just change the colors to black and white, adjust some parameters, and Illustrator’s “any gradient” doesn’t seem that complicated!

However, there are very few complete ** * information about CSS gradient on the Internet, even MDN has Chinese support problems, so I read the Official English document for a long time to understand.

And the rookie tutorial (runoob.com) and W3School documents, currently only say that there are two functions (the most commonly used linear gradient and radial gradient), only introduce the most basic use method, and this is not enough in many actual situations.

So I decided to put my understanding here in the most accessible way and share with you the most complete Chinese document (probably the only one so far).

Are you ready? The big show has begun!

CSS

is a type of
, so it can be used not only for background, but also for border-image and other images.

There are currently six CSS tween functions supported, three of which are basic and the other three are repetitive tween functions.

  1. Linear-gradient ()

    Grammar:

    background: linear-gradient(angle, stop1, stop2, ...) ; */ linear gradient(#e66465, #9198e5); /* Angle optional, the default value is to bottom. stop */ Linear gradient(#e66465, #9198e5); /* Linear gradient(90deg, green, yellow); /* Linear gradient(90deg, green, yellow); /* Linear gradient(to left, orange, yellow); /* Angle set to 90 degrees, indicating left to right */ Linear gradient(to left, orange, yellow); /* to <direction> indicates the gradient direction. The value can be: to top = 0deg, to bottom = 180deg, to left = 270deg, to right = 90deg */ linear-gradient(to right bottom, black, */ Linear gradient(0.25turn, #3f87a6, # eBF8e1, #f69d3c); */ Linear gradient(0.25turn, #3f87a6, #f69d3c); */ Linear gradient(#3f87a6, # eBF8E1 10% 50%, #f69d3c 30%); */ linear gradient(#3f87a6, # eBF8E1 10% 50%, #f69d3c 30%); */ linear gradient(#3f87a6, # eBF8E1 10% 50%, #f69d3c 30%); /* For each color label (<linear color-stop>), the <percentage> following the color indicates the location of the color label. If there is a percentage, it indicates the location of the color label. If there are two, it indicates a range. If the position is not set, it is the average of the two nearest positions. */ Linear gradient(pink, 25%, orange); */ linear gradient(pink, 25%, orange); /* Add <percentage> between the two colors to indicate the transition ratio (<color-hint>), as in this example, there is less pink and more orange. This is done by implicitly adding a point between the pink and orange with a color code at 25%, where the color is the average of the two, and then letting both transition to the added color code. */Copy the code

  2. Radial gradient

    Grammar:

    background: radial-gradient(position, stop1, stop2, ...) /*position Optional, the default value is center.*/ radial-gradient(lime, yellow); /* Transition from inner to outer cyan to yellow */ radial-gradient(circle, lime, yellow); /* You can specify a gradient shape (<ending-shape>). The default is Ellipse, which will be stretched according to the aspect ratio of the element. The circle is defined here, and the gradient is a perfect circle no matter how big the element is. */ radial-gradient(circle at 50px 25%, lime, yellow); */ radial-gradient(circle at 50px 25%, lime, yellow); /* The at keyword can be used to specify the initial position of the radial gradient */ radial-gradient(50px circle, lime, yellow); radial-gradient(30px 20px ellipse, lime, yellow); /* The closest approximation is closest to the radial part of the circle.*/ Closest approximation is closest to the radial part of the circle. /* According to the first parameter, uspSARapecorner = usPSARapecorner 14. Closest to the center of the gradient was the end location closest to the container The farthest Angle from the gradient center to the container is the termination position */ radial-gradient(circle, green 20%, Lime, yellow 10% 50%); /* You can add one or two <percentage> after <linear color-stop> to indicate the gradient interval. */ Radial -gradient(Closest side circle at 50px 25%, Lime, 20%, yellow); /* Add <percentage> between the two colors to indicate the transition ratio. The usage and effect are the same as in Linear-gradient (). */Copy the code

  3. Conic-gradient

    Grammar:

    background: conic-gradient( from <angle> at <position>, <angular-color-stop-list>); /* From < Angle > and at <position> Optional. < Angle > Default value is 0deg, <postion> default value is center*/ conic-gradient(from 45deg, black, white); /*from < Angle > specify the initial Angle */ conic-gradient(from 45deg at 25% 50px, black, white); /*at <position> select */ conic-gradient(from 45deg at 25% 50px, black, 75%, white); /* You can also specify the transition ratio (<color-hint>)*/Copy the code

  4. , 5., 6. Repeating-linear-gradient, repeating-radial-gradient, repeating-conic-gradient()

    background: 
 repeating-radial-gradient(
   circle at 0 0, 
   #eee,
   #ccc 50px
 );
Copy the code

    The code above should display an image like this:

    The syntax of a repeat gradient is exactly the same as the corresponding basic gradient, but it is filled repeatedly based on the original image.

Ha ~ OK, if there is no question about Background&Gradient next time, you can directly press CTRL (MAC: Command)+ F in this article. Or if you need it, you can collect it.

->> See also

Gradienta – Experience editing CSS Gradienta background gradient. IO/online

Codepen – Explaining Gradient Angles Codepen. IO/ThebabyDino…

MDN – Gradient: developer.mozilla.org/en-US/docs/… Developer.mozilla.org/en-US/docs/… Developer.mozilla.org/en-US/docs/… Developer.mozilla.org/en-US/docs/… Developer.mozilla.org/en-US/docs/… Developer.mozilla.org/en-US/docs/… Developer.mozilla.org/en-US/docs/…

->> Reference link

MDN 英 文 版 developer.mozilla.org/zh-CN/docs/…

MDN English document developer.mozilla.org/en-US/docs/…

Zhang Xinxu www.zhangxinxu.com/wordpress/2…

CSS – Tricks css-tricks.com/snippets/cs…

Novice tutorial www.runoob.com/cssref/css3…

Sara Cope css-tricks.com/almanac/pro…

– CSS Background properties juejin.cn/post/684490…

MDN – Use CSS gradient developer.mozilla.org/zh-CN/docs/…

->> Version History

Now available at V1.0 see Github(@Flightmakers)

– Release V0.1 in 2021.8.25(originally planned for 2021.8.19, but failed

2021.8.26 Complete related content of gradient and release V1.0