집 >웹 프론트엔드 >CSS 튜토리얼 >CSS3의 새로운 배경 속성 및 그라데이션 기능(그라디언트)에 대한 간략한 토론

CSS3의 새로운 배경 속성 및 그라데이션 기능(그라디언트)에 대한 간략한 토론

青灯夜游앞으로: 2021-08-20 10:28:172859검색

이 글에서는 배경(배경)의 새로운 속성과 그라데이션 기능(gradient)을 소개하여 어떤 새로운 배경 요소 컨트롤과 다양한 그라데이션이 제공되는지 확인합니다. 효과. background）的新增属性和渐变函数（gradient），看看提供了哪些新背景元素控制和多种渐变效果的实现。

背景 Background

background 是多个背景属性的简写，

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

注意： 如果有 background-size 值，需要紧跟 background-position 并且用 "/" 隔开；

background-image

background-image 属性可以添加多张背景图片，不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。设置多张 png 图片，可以出多张背景图叠加的效果。

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

CSS3의 새로운 배경 속성 및 그라데이션 기능(그라디언트)에 대한 간략한 토론

建议： 使用背景图片的时候，最好也设置背景颜色（background-color），作为背景图片不支持时的 planB。

background-size

CSS3 以前，背景图像大小由图像的实际大小决定。在 CSS3 中，background-size 属性可以指定背景图像的大小，取值像素或百分比（相对于父元素的宽度和高度的百分比的大小）。

图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸：

cover：保持图像的宽高比例，缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。
contain：保持图像的宽高比例，缩放背景图片以完全装入背景区，可能背景区部分空白。
一个值：这个值指定图片的宽度，图片的高度隐式的为 auto
两个值：第一个值指定图片的宽度，第二个值指定图片的高度

background-origin

background-origin 规定了指定背景图片 background-image 属性的原点位置的背景相对区域。

注意： 当使用 background-attachment 为 fixed 时，该属性将被忽略不起作用。

CSS3의 새로운 배경 속성 및 그라데이션 기능(그라디언트)에 대한 간략한 토론

border-box背景图片的摆放以 border 区域为参考
padding-box背景图片的摆放以 padding 区域为参考
content-box背景图片的摆放以 content 区域为参考

background-clip

background-clip 背景剪裁属性是指定背景（背景图片或颜色）的绘制区域。

border-box：背景区域延伸到边框（但是在边框下层）
padding-box：背景区域延伸到内边距
content-box：背景区域延伸到内容区
text：背景被裁剪成文字的前景色。需要加上前缀 -webkit-background-clip: text;

渐变 Gradient

CSS3 渐变（gradients）可以让在两个或多个指定的颜色之间显示平稳的过渡。对比使用渐变图片，gradients 可以减少下载的时间和宽带的使用，并且在放大时看起来效果更好。

线形渐变

颜色值沿着一条隐式的直线逐渐过渡。由 linear-gradient() 产生。

为了创建一个线性渐变，你必须至少定义两种颜色节点。颜色节点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）。

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

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

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

语法

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

<angle></angle>

배경

배경은 여러 배경 속성의 약어입니다.
```
radial-gradient(
  [shape size at position] ?
  <color-stop-list> [ , <color-stop-list> ]+
)
```
참고: If If 배경 크기 값이 있습니다. 배경 위치가 오고 "/"로 구분되어야 합니다.

배경 이미지
🎜배경 이미지 속성은 여러 배경 이미지를 추가할 수 있습니다. 다양한 배경 이미지와 이미지는 쉼표로 구분됩니다. . 여러 배경 이미지를 오버레이하는 효과를 만들려면 여러 png 이미지를 설정하세요. 🎜
```
.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
  );
}
```
🎜🎜🎜 권장사항: 배경 이미지 사용 시, 배경 이미지가 지원되지 않는 경우에는 배경색(Background-color)도 planB로 설정하는 것이 가장 좋습니다. 🎜
배경 크기
🎜CSS3 이전에는 배경 이미지 크기가 이미지의 실제 크기에 따라 결정되었습니다. CSS3에서 background-size 속성은 배경 이미지의 크기를 픽셀 또는 백분율(상위 요소의 너비와 높이에 대한 백분율로 표시한 크기)로 지정할 수 있습니다. 🎜🎜이미지는 원래 크기를 유지하거나, 새 크기로 늘리거나, 원래 비율을 유지하면서 요소의 사용 가능한 공간 크기에 맞게 크기를 조정할 수 있습니다. 🎜
- 표지 code >: 이미지의 화면 비율을 유지하고 배경 이미지의 크기를 조정하여 배경 이미지의 일부가 보이지 않을 수 있습니다.
- 포함: 이미지의 가로 세로 비율을 유지하고 배경 이미지의 크기를 조정하여 배경 영역에 완전히 맞도록 하며 배경 영역이 부분적으로 비어 있을 수 있습니다.
- 하나의 값: 이 값은 이미지의 너비를 지정하며 이미지의 높이는 암시적으로 자동입니다.
- 두 개의 값: 첫 번째 값은 이미지의 너비를 지정하고 두 번째 값은 이미지의 높이를 지정합니다.
Background-origin
🎜Background-origin은 지정된 배경을 지정합니다. image 배경 -image 속성의 원점 위치를 배경으로 한 영역입니다. 🎜🎜참고: background-attachment를 fixed로 사용하는 경우 이 속성은 무시되며 아무런 효과도 없습니다. 🎜🎜🎜
- border-box배경 이미지의 배치는 테두리 영역을 기준으로 합니다.
- padding-box배경 이미지의 배치는 다음과 같습니다. 패딩 영역 기준. 참조
- content-box배경 이미지 배치는 콘텐츠 영역 기준입니다.
배경-클립
🎜배경-클립 배경 클리핑 속성은 배경의 그리기 영역(배경 이미지 또는 색상)을 지정합니다. 🎜
- 🎜border-box: 배경 영역이 테두리까지 확장됩니다(그러나 테두리 아래). 🎜🎜🎜🎜
- 🎜패딩 박스: 배경 영역 패딩으로 확장🎜🎜🎜🎜
- 🎜content-box: 배경 영역이 콘텐츠 영역까지 확장됩니다🎜🎜🎜🎜
- 🎜text: 배경은 텍스트로 잘림 전경색입니다. -webkit-Background-clip: text;🎜🎜🎜🎜
그라디언트
🎜CSS3 그라디언트 ) 허용 두 개 이상의 지정된 색상 사이의 부드러운 전환을 표시합니다. 그라디언트 이미지를 사용하는 것에 비해 그라디언트는 다운로드 시간과 대역폭 사용량을 줄이고 확대할 때 더 보기 좋습니다. 🎜
선 그라데이션
🎜색상 값은 암시적 직선을 따라 점차적으로 전환됩니다. linear-gradient()에 의해 생성됩니다. 🎜🎜선형 그래디언트를 생성하려면 최소 두 개의 색상 노드를 정의해야 합니다. 색상 노드는 부드러운 전환을 표시하려는 색상입니다. 동시에 시작점과 방향(또는 각도)도 설정할 수 있습니다. 🎜rrreee🎜구문🎜rrreee
- 🎜<angle></angle>: 각도 값을 사용하여 그라데이션의 방향(또는 각도)을 지정합니다. 각도는 시계방향으로 증가합니다. 🎜🎜🎜🎜🎜
- <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
  );
}
```
更多编程相关知识，请访问：编程入门！！