A brief discussion on the new background attributes & gradient function (gradient) in CSS3

This article introduces the new attributes and gradient functions (gradient) of the background (background) to see what new backgrounds are provided Element control and implementation of multiple gradient effects.

BackgroundBackground

background is the abbreviation for multiple background attributes,

backgrounf: [background-color] | [background-image] |
    [background-position][/background-size] | [background-repeat] |
    [background-attachment] | [background-clip] | [background-origin], ...;

Note: If there isbackground-size value needs to be followed closely by background-position and separated by "/";

background-image

background-image The attribute can add multiple background images. Different background images and images are separated by commas. The first image displayed at the top of all images is. Set multiple png images to create the effect of overlaying multiple background images.

background-image: url("../../media/examples/lizard.png"),
  url("../../media/examples/star.png");

Suggestions: When using a background image, it is best to also set the background color (background-color) as planB when the background image is not supported .

background-size

CSS3 Previously, background image size was determined by the actual size of the image. In CSS3, the background-size property specifies the size of the background image, either in pixels or as a percentage (the size as a percentage of the width and height of the parent element).

The image can retain its original dimensions, or be stretched to a new size, or scaled to fit within the available space of the element while maintaining its original proportions:

• cover: Maintain the aspect ratio of the image and scale the background image to completely cover the background area. Parts of the background image may not be visible.
• contain: Maintain the aspect ratio of the image, scale the background image to fit completely into the background area, and the background area may be partially blank.
• One value: This value specifies the width of the picture, and the height of the picture is implicitly auto
• Two values: the first value specifies the width of the picture, and the second value specifies the height of the picture The height

background-origin

background-origin specifies the background relative area to the origin position of the specified background image background-image attribute .

Note: When using background-attachment as fixed, this attribute will be ignored and will have no effect.

• border-boxThe placement of the background image is based on the border area
• padding-boxThe background image is placed with the padding area as a reference
• content-boxThe background image is placed with the content area as a reference

background-clip

background-clip The background clipping property specifies the drawing area of ​​the background (background image or color).

• border-box: The background area extends to the border (but below the border)

  
  

• padding-box: The background area extends to the padding

  
  

• # #content-box: The background area extends into the content area

  
  

• text: The background is cropped to The foreground color of the text. Need to add the prefix -webkit-background-clip: text;

  
  

Gradient

CSS3 Gradients allow smooth transitions between two or more specified colors. Compared to using gradient images, gradients can reduce download time and bandwidth usage, and look better when zoomed in.

Linear Gradient

Color values ​​gradually transition along an implicit straight line. Generated by

linear-gradient().

In order to create a linear gradient, you must define at least two color nodes. The color node is the color you want to show a smooth transition. At the same time, you can also set a starting point and a direction (or an angle).

/* 渐变轴为45度，从蓝色渐变到红色 */
linear-gradient(45deg, blue, red);

/* 从右下到左上、从蓝色渐变到红色 */
linear-gradient(to left top, blue, red);

/* 从下到上，从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束 */
linear-gradient(0deg, blue, green 40%, red);

Syntax

linear-gradient([ <angle> | to <side-or-corner> ,]? <color-stop-list> )

• ##

  : Use the angle value to specify the direction (or angle) of the gradient. The angle increases clockwise.

  

• <side-or-corner></side-or-corner>：描述渐变线的起始点位置。to top, to bottom, to left 和 to right 这些值会被转换成角度 0 度、180 度、270 度 和 90 度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。
• <color-stop-list></color-stop-list>：颜色变化列表。支持透明度（rgba(255,0,0,0.1)）。

径向渐变

radial-gradient() CSS 函数创建了一个图像，该图像的颜色值由一个中心点（原点）向外扩散并逐渐过渡到其他颜色值。

同样至少需要定义两种颜色节点，也可以指定渐变的中心（默认在中心点，center）、形状（默认椭圆形 ellipse）、大小（默认 farthest-corner，表示到最远的角落）

语法

radial-gradient(
  [shape size at position] ?
  <color-stop-list> [ , <color-stop-list> ]+
)

• shape：椭圆形（ellipse，默认）或圆形（circle）
• size：
  • closest-side， 渐变的边缘形状与容器距离渐变中心点最近的一边相切（圆形）或者至少与距离渐变中心点最近的垂直和水平边相切（椭圆）。
  • closest-corner， 渐变的边缘形状与容器距离渐变中心点最近的一个角相交。
  • farthest-side， 与 closest-side 相反，边缘形状与容器距离渐变中心点最远的一边相切（或最远的垂直和水平边）。
  • farthest-corner， 渐变的边缘形状与容器距离渐变中心点最远的一个角相交。
• position：可以是具体的两个位置偏移值（10% 20%），也可以是关键字（left、right、top、bottom）

重复渐变

重复多次渐变图案直到足够填满指定元素。由 repeating-linear-gradient() 和 repeating-radial-gradient() 函数产生。

重复函数的参数同上，不同的是它会基于渐变长度（最后一个色标和第一个之间的距离）倍数重复。

.linear-repeat {  background: repeating-linear-gradient(
    to top left,
    lightpink,
    lightpink 5px,
    white 5px,
    white 10px
  );
}.radial-repeat {  background: repeating-radial-gradient(
    powderblue,
    powderblue 8px,
    white 8px,
    white 16px
  );
}

更多编程相关知识，请访问：编程入门！！

The above is the detailed content of A brief discussion on the new background attributes & gradient function (gradient) in CSS3. For more information, please follow other related articles on the PHP Chinese website!