Learn the Web from scratch CSS3 (c) Gradient, background property

Tag: The image contains the hub address list and not the ATT

Hello everyone, here is "learn the Web series from scratch" and synchronize updates at the following address ...

• Github:https://github.com/daotin/web
• Public number: The top of the Web front
• Blog Park: http://www.cnblogs.com/lvonve/
• csdn:https://blog.csdn.net/lvonve/

Here I will start with the Web front End 0 Foundation, step-up learning web-related knowledge points, during the period will also share some fun projects. Now let's go to the Web Front end learning Adventure tour!

First, the gradient

Gradient is a more colorful feature in CSS3, through the gradient we can achieve a lot of dazzling effect, effectively reduce the number of images used, and has a strong adaptability and scalability. Can be divided into linear gradient , radial gradient .

1. Linear gradient

Linear gradient: refers to a gradient in one direction along a line.

Grammar:

background: linear-gradient(direction, color1, color2 [stop], color3...);

parameter Description :

• direction: Indicates the direction of the linear gradient,
  • to left: Sets the gradient to right-to-left. Equivalent: 270deg;
  • to right: Sets the gradient from left to right. Equivalent: 90deg;
    
  • to top: Sets the gradient from bottom to top. Equivalent: 0deg;
  • to bottom: Sets the gradient from top to bottom. Equivalent to: 180deg. This is the default value.
• color1: Start color.
• color2: Transition color, specifying the position of the transition color stop.
• color3: End color. You can also add more transition colors and locations later, representing a variety of color gradients.

Example:

background: linear-gradient(to right, blue, green 20%, yellow 50%, purple 80%, red);

2. Radial gradient

Radial gradient: A gradient effect that starts along the perimeter from a central point.

Grammar:

background: radial-gradient(shape size at position, start-color, ..., color [stop] ..., last-color);

Parameter description:

• shape: The shape of the gradient.
  • ellipseRepresents an ellipse,
  • circleRepresents a circle. The default is ellipse,

  ? if the element is the same width and height as a square, the ellipse and circle appear the same;

  If the element width is not the same, the default effect is ellipse.

• Size: The scale of the gradient, that is, where the gradient stops, and it has four values.
  • closest-side: Nearest side;
  • farthest-side: Farthest side;
  • closest-corner: Nearest corner;
  • farthest-corner: Most far corner. The default is the far corner .
• at position: The center position of the gradient. Like what:
  • at top left: Center is the upper-left position of the element
  • at center center: Center for Element Center location
  • at 5px 10px: Center is offset element to the right of the upper left position 5px, bottom 10px position.
• start-color: Starting Color
• color: Gradient color, selectable starting position stop.

• last-color: End color.

Note: Each parameter is separated by a space instead of a comma.

Example:

background: radial-gradient(circle farthest-side at right top, red, yellow 50%, blue);

3. Repeating gradients

Grammar:

repeating-linear-gradient /*线性重复渐变*/repeating-radial-gradient /*径向重复渐变*/

Repeated words, it is necessary to have a coincident hundred percent as the dividing line. The gradient is then automatically repeated proportionally.

Example:

    <style>        div:first-of-type {            width: 200px;            height: 200px;            margin: 100px auto;            /* border: 1px solid blue; */            background: repeating-radial-gradient(circle closest-side at center center,                         blue 0%, yellow 10%, blue 20%,                        red 20%, yellow 30%, red 40%);        }        div:last-of-type {            width: 800px;            height: 10px;            margin: 100px auto;            /* border: 1px solid blue; */            background: repeating-linear-gradient(45deg,                        yellow 0%, blue 5%, red 10%,                        red 10%, blue 15%, yellow 20%);        }    </style>

Second, Background property 1, review background properties

/*添加背景颜色*/background-color: #fff;/*添加背景图片*/background-image: url("./images/img.jpg");/*设置背景平铺*/background-repeat：repeat(默认) | no-repeat | repeat-x | repeat-y | round | space/*新增两个值：    round:会将图片进行缩放之后再平铺。保证图片完整紧凑排列。    space:图片不会缩放平铺，只是会在图片之间产生相同的间距值。*//*背景定位*/background-position：left | right | center（默认） | top | bottom /*背景是否滚动*/background-attachment:scroll（默认） | fixed /* 说明：    scroll: 背景图的位置是基于盒子（假如是div）的范围进行显示；    fixed：背景图的位置是基于整个浏览器body的范围进行显示，如果背景图定义在div里面，而显示的位置在浏览器范围内但是不在div的范围内的话，背景图无法显示。*/

The difference between local and scroll : When scrolling through the contents of the current box (DIV),

local: The background image will scroll along with the content;

scroll: The background picture does not scroll along with the content.

2, the new background attribute 2.1, Background-size

The properties in CSS background-size allow the programmer to decide how to show in the specified element, which changes the size of the background size by varying the attribute values. It is often recommended not to enlarge the diagram, if necessary, as far as possible to reduce the graph to ensure the accuracy of the picture.

/*设置背景图片的大小：宽度/高度   宽度/auto(保持比例自动缩放)*/background-size: 100px 50px;background-size: 100px;/*设置百分比，是参照父容器可放置内容区域的百分比*/background-size: 50% 50%;/*设置contain:按比例调整图片大小，使用图片宽高自适应整个元素的背景区域，使图片全部包含在容器内1.图片大于容器：有可能造成容器的空白区域,将图片缩小2.图片小于容器：有可能造成容器的空白区域，将图片放大*/*background-size: contain;/*cover:与contain刚好相反，背景图片会按比例缩放自适应填充整个背景区域，如果背景区域不足以包含所有背景图片，图片内容会溢出1.图片大于容器：等比例缩小，会填满整个背景区域，有可能造成图片的某些区域不可见2.图片小于容器：等比例放大，填满整个背景区域，图片有可能造成某个方向上内容的溢出*/background-size: cover;

2.2, Background-origin

Function: improves the user's response area.

When we locate the background-position, the default positioning origin is positioned in the upper left corner of the element. Can you adjust the location of the positioning?

background-origin: The position of the location origin can be adjusted.

Grammar:

background-origin: padding-box|border-box|content-box;

• border-box: Fills the background from the upper left corner of the border and overlaps with the border;
• padding-box: Fills the background from the upper left corner of the padding and overlaps with the padding;
• content-box: Fills the background from the position in the upper-left corner of the content.

When the setting background-origin：content-box; , you can display the picture in the middle of the box, if the picture is a sprite, there will be other graphic interference, how to do it, can I just show the sprite diagram I need? Look at the background-clip below.

2.3, Background-clip

background-clip: Property Specifies the drawing area of the background.

Although the setting is trimmed, the control is displayed. To be blunt, that is to set the final display of those areas.

Grammar:

background-clip: border-box|padding-box|content-box;

• border-box: Show only border and within content
• padding-box: Show only padding and within content
• content-box: Only content and contents are displayed

So, back to the last question in section 2.2, we can then set background-clip:content-box; it up to block the other sprites.

So why did you do it? Why do you make a label so big that it's as big as the sprite diagram you need?

Do you remember a A-Z list on the right side of your phone address book? A little easier? Isn't it easy to make a mistake?

The purpose of my doing this is to improve the user's click , but the content of the display is the previous one, which can improve the user experience AH.

2.4, Case: Use of the sprite diagram

Requirements: Set the sprite background for a block element, which is small, but requires a larger display area to respond to the user's needs in a larger range, but only the specified background image needs to be displayed.

<!DOCTYPE html>

Visible from the graph, the return arrow under A's range becomes larger, then the user clicks the response area is also big.

Learn the Web from scratch CSS3 (c) Gradient, background property