How to achieve linear gradient in css3 background

In CSS3, you can use the background attribute and linear-gradient() function to implement background linear gradient, the syntax is "background:linear-gradient(gradient direction, color 1, color 2,...);" .

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

A gradient is an image that fades smoothly from one color to another, allowing you to show a smooth transition between two or more specified colors. These are often used for subtle coloring in background images, buttons, and many other things.

Gradient specifies the degree of a gradient by defining the start and end points of a gradient line (a gradient line can be geometrically a straight line, a ray, or a spiral, depending on the type of gradient gradient), and then specifying the gradient of points along this line. color. The colors are blended smoothly to fill the rest of the line, and then each type of gradient produces the actual gradient by defining the color of the gradient line using it.

And css3 linear-gradient() can create a linear gradient by specifying the gradient line as a straight line and then placing several colors along the line. We can build an image by creating an infinite canvas and drawing the image using lines perpendicular to the gradient line, with the color of the drawn line being the color of the two intersecting gradient lines. This produces a smooth fade from each color to the next, going in the specified direction.

Syntax for background linear gradient:

background:linear-gradient(direction, color-stop1, color-stop2, ...);

The first parameter accepted by this function (characteristic) is the angle of the gradient. It can accept a value representing the angle (available units are deg, rad, grad or turn) or keywords indicating direction (top, right, bottom, left, left top, top right, bottom right or left bottom). The second parameter accepts a series of color nodes (the color of the end point).

Gradient container (gradient box)

A gradient image is different from a traditional background image. It has no dimensions (size restrictions). It is unlimited. Then the visible area of ​​the gradient image is determined by the size of the gradient container.

Normally, if you use linear-gradient for a DOM element's background-image or background, its (gradient) display area is The border-box area of ​​the element (if you don’t know the border-box area of ​​the element, it is recommended to read the box-sizing related documents first). In fact, it is also background-color or the display area where the background image is introduced through the url.

However, if you set a size through CSS's background-size, such as 200px * 200px, then the gradient container (gradient size) is background-sizeSet size200px * 200px. When background-position is not set to another value, it defaults to being displayed in the upper left corner of the DOM element (that is, background-position: left top).

In CSS, gradient is background-image of background, that is to say, the CSS properties that are suitable for background images are suitable for gradients.

Gradient line

In a gradient container, the line that connects the center point of the container and the color stop point is called a gradient line. When introducing the knowledge related to gradient angles in the next section, it will help you better understand gradient lines, so we will introduce more details in the next section.

Gradient angle

Obviously, using linear-gradient controls the direction of the gradient through the angle of the gradient. Next let's learn more details about it.

C point gradient container center point, A is the vertical line passing through C point and passing through CPoint the angle between the gradient lines. This angle is called the gradient angle.

You can define this angle in the following two ways:

• Use keywords: to top, to bottom ,to left,to right,to top right,to top left,to bottom rightandto bottom left

• Use numbers with units to define the angle, such as 45deg, 1turn, etc.

If you omit the setting of the angle value, the default is to bottom (corresponding to 180deg or .5turn):

In the above example, the gradient angle is not set, and the white to red gradient color gradients from top to bottom. It is the same effect as using the to bottom keyword, as shown below:

The effect of the following two pictures is to use to top and 0deg, and their effects are the same:

Another important point about using the top keyword is that it depends on the size of the gradient container, such as to top right (or other corner keywords).

If you want a gradient from red to blue, the direction is to the top right of the element. Logically, the blue should be in the upper right corner of the element, and the purple gradient in the middle should form a straight line from the upper left corner to the lower right corner. As shown in the figure below:

So to top right does not mean that the gradient line passes through the upper right corner, which means that the gradient angle does not mean 45deg.

That is to say, if linear-gradient uses the top keyword (to top right, to top left, to bottom right and to bottom left), the gradient line first passes through the center point of the element and is connected with The vertices intersect perpendicularly, and the angle formed by the vertical line from the center point is the gradient angle.

Let us see how the gradient line moves when the gradient angle changes dynamically:

回顾一下渐变角度：

• 角度是渐变线与渐变容器中心点向上垂直线之间的夹角

• 0deg的意思就是to top

• 角度的默认值（也就是角度没有设置），它的值是to bottom，也和180deg相同

• 顶角关键词和渐变容器尺寸有关

渐变线长度a

之前我们看到渐变色停止分布沿着渐变线是需要解释的一件事情。你可能已经注意到了，在前面的示例中，停止的渐变颜色有时候在渐变容器以外的位置，这看起来有点奇怪，但如果你知道其中的逻辑之后，你就不会这么认为了。先看一下这个示例：

我们想要一个red至blue的渐变，渐变的角度是45deg，因为渐变容器的比例，渐变线不能通过右上角。但浏览器想要做什么（规范告诉它做什么），能使右上角是blue。

如果我们让渐变线的开始和结束都在渐变容器的边缘，那么blue将会覆盖渐变容器更大的区域，渐变不会有更多的扩散。

因此，为了做到这一点，渐变线有时不得不延长到渐变容器之外。其实很容器知道它的开始和结束位置。通过最近的角落画一条垂直于渐变线的线，与渐变线交叉的地方，就是渐变的开始和结束位置。

事实上，如果W是渐变容器的宽度，H是渐变容器的高度，A是渐变角度，那么渐变线的长度可以通过下面的公式计算：

abs(W * sin(A)) + abs(H * cos(A))

渐变色节点（Color stops）

渐变色的每一个可以这样定义：

<color> [<percentage> | <length>]?

因此不是强制性来指定颜色在渐变线的位置。例如：

如果没有显式指定颜色在渐变线上的位置，这将交给浏览器来确定颜色在渐变线上的位置。最简单的情况下只有两个颜色，颜色1将被放置在渐变线0%位置（渐变线开始位置），颜色2将被放置在100%位置处（渐变线的结束点）。如果有三个颜色，那么颜色1在渐变线的0%，颜色2在渐变线的50%，颜色3在渐变线的100%。在上面的这个示例中，有五个颜色，那么它们的位置分别在0%、25%、50%、75%和100%。它们将沿着渐变线平均分布渐变颜色。

当然，也可以在渐变线上显式自定义渐变颜色在渐变线的位置。每个位置可以用百分比表示（相对于渐变线计算），也可以是任何一个CSS长度单位。比如下面这个示例：

正如你所看到的，五个颜色的每个颜色都有自己的位置，而且是以像素为单位。这些位置从渐变线的开始位置处开始计算。

使用这些位置，你可以想出各种各样的漂亮效果。这样你可以做一个多色渐变：

上图中，有七个颜色，其中下一个颜色是在上一个颜色开始位置，这意味弟浏览器不需要填满两个颜色之余间的空间。

当然这样蛮好的也很有趣，如果你把颜色位置配合一起来使用会是什么样的情形。然后让浏览器自动分配你省略的颜色位置。

在上面的示例中，第二个颜色orange没有明确的指定其在渐变线上的位置，所以浏览器会自动计算出其位置。它可以根据第一个位置和下一个位置很容易计算出来。但如果有多个颜色没有指定位置，或者前一个或后一个都没有指定位置，那它就变得越来越复杂。

看下面这个示例：

在上图中，只有第三个颜色yellow指定了位置，在渐变线的30%处。为了很好的分发，它把第一个颜色red放置在渐变线的0%处，最后一个颜色black放置在渐变线的100%处。第二个颜色orange放置在渐变线0%至30%的中间位置，第四个颜色red放置在渐变线30%至100%中间位置。

The first and last colors in the above picture are placed at the specified positions of the gradient line, and the remaining colors are evenly distributed between the two.

Of course, if it is between 0% and 100%, it is easy for us to control. But there are cases that go beyond this range. For example, in the example above, the last color is at 120% of the gradient line, so the other colors will be evenly distributed based on this position (the default starting position is still 0%, in this example).

If you want to make your browser work more, why can't you specify the position of the colors sequentially on the gradient line? The fact that the color point positions are in accordance with your expected instructions does not prevent you from operating in a non-sequential order. But if the later value is smaller than the previous value, the browser will automatically make corresponding corrections. For example:

Let us start with the first color red, which is positioned at 30% of the gradient line, and the second color orange is at 10%, but this is wrong, as said above, the stopping point of the color is an increment. At this time, the browser will correct the position of the second color. It will be the same as the previous color and will also be distributed at 30% of the gradient line. Then the third color yellow is distributed at 60% of the gradient line, but the fourth color blue immediately following it is 40%. The browser will also correct and set its position to be the same as the previous color position.

Finally, in the above example, the last color blue is in the incorrect position, so the browser will correct its position to be the same as the previous one, in In this case, it is not the adjacent color yellow, nor orange, it will be traced back to the first color red. Therefore, red and blue are both distributed at 30% of the gradient line, so the yellow and orange colors will not be visible.

Tool

The screenshots in the article are all obtained from a simple tool written by Codepen, you can Enter any gradient value in the input box, and you can see the gradient effect as well as the position of the gradient line, gradient angle and gradient color.

Currently this tool still has various flaws and limitations (see comments in JavaScript), so don’t have too high expectations. Of course, you can also improve this tool on this basis to help everyone. Better understand gradients.

Tool address: https://codepen.io/captainbrosset/pen/ByqRMB

(Learning video sharing: css video tutorial)

The above is the detailed content of How to achieve linear gradient in css3 background. For more information, please follow other related articles on the PHP Chinese website!