Eine kurze Diskussion über die neuen Hintergrundattribute und die Verlaufsfunktion (Gradient) in CSS3

In diesem Artikel werden die neuen Attribute und Verlaufsfunktionen (gradient) des Hintergrunds (background) vorgestellt, um zu sehen, welche neuen Hintergrundelementsteuerelemente und verschiedenen Verläufe bereitgestellt werden Effekte. 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");

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

background-size

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

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

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

background-origin

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

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

• 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>

  Hintergrund

  Hintergrund ist die Abkürzung für mehrere Hintergrundattribute,

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

  
  Hinweis: Wenn Wenn Es gibt einen background-size-Wert, ihm muss background-position folgen und durch "/" getrennt werden

  background-image

  🎜background-image Attribut kann mehrere Hintergrundbilder hinzufügen und Bilder werden durch Kommas getrennt . Für den ersten. Legen Sie mehrere PNG-Bilder fest, um den Effekt zu erzielen, dass mehrere Hintergrundbilder überlagert werden. 🎜

  .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
    );
  }

  🎜🎜🎜 Empfehlung: Wenn Sie ein Hintergrundbild verwenden, ist es am besten, auch die Hintergrundfarbe (background-color) auf planB festzulegen, wenn das Hintergrundbild nicht unterstützt wird. 🎜

  background-size

  🎜CSS3 Bisher wurde die Hintergrundbildgröße durch die tatsächliche Größe des Bildes bestimmt. In CSS3 kann das Attribut background-size die Größe des Hintergrundbilds angeben, entweder in Pixeln oder als Prozentsatz (die Größe als Prozentsatz der Breite und Höhe des übergeordneten Elements). 🎜🎜Das Bild kann seine ursprüngliche Größe beibehalten oder auf eine neue Größe gestreckt oder auf die Größe des verfügbaren Platzes des Elements skaliert werden, während seine ursprünglichen Proportionen erhalten bleiben: 🎜
  • cover code>: Behalten Sie das Seitenverhältnis des Bildes bei und skalieren Sie das Hintergrundbild so, dass Teile des Hintergrundbilds möglicherweise nicht sichtbar sind.
  • contain: Behalten Sie das Seitenverhältnis des Bildes bei, skalieren Sie das Hintergrundbild so, dass es vollständig in den Hintergrundbereich passt. Der Hintergrundbereich ist möglicherweise teilweise leer.
  • Ein Wert: Dieser Wert gibt die Breite des Bildes an, und die Höhe des Bildes ist implizit automatisch
  • Zwei Werte: Der erste Wert gibt die Breite des Bildes an und der Der zweite Wert gibt die Höhe des Bildes an.

  background-origin

  🎜background-origin gibt den angegebenen Hintergrund an image background Der Bereich relativ zum Hintergrund der Ursprungsposition des Attributs -image. 🎜🎜Hinweis: Wenn background-attachment als fixed verwendet wird, wird dieses Attribut ignoriert und hat keine Auswirkung. 🎜🎜🎜
  • border-boxDas Hintergrundbild wird mit dem Randbereich als Referenz platziert
  • padding-boxDas Hintergrundbild wird mit dem platziert Füllbereich als Referenz Referenz
  • content-boxDie Platzierung von Hintergrundbildern basiert auf dem Inhaltsbereich

  background-clip

  🎜background-clip Das Hintergrundausschnittattribut gibt den Zeichenbereich des Hintergrunds an (Hintergrundbild oder Farbe). 🎜
  • 🎜border-box: Der Hintergrundbereich erstreckt sich bis zum Rand (aber unterhalb des Randes) 🎜🎜🎜🎜
  • 🎜padding-box: Hintergrundbereich Auf Polsterung erweitern🎜🎜🎜🎜
  • 🎜content-box: Der Hintergrundbereich erstreckt sich auf den Inhaltsbereich🎜🎜🎜🎜
  • 🎜text: Der Hintergrund ist in Text zugeschnitten Die Vordergrundfarbe. Das Präfix -webkit-background-clip: text;🎜🎜🎜🎜

  Gradient

  🎜CSS3-Verläufe ) ermöglicht Sie können einen sanften Übergang zwischen zwei oder mehr angegebenen Farben anzeigen. Im Vergleich zur Verwendung von Verlaufsbildern können Farbverläufe die Downloadzeit und die Bandbreitennutzung reduzieren und sehen beim Vergrößern besser aus. 🎜

  Linearer Farbverlauf

  🎜Farbwerte verlaufen allmählich entlang einer impliziten geraden Linie. Erstellt von linear-gradient(). 🎜🎜Um einen linearen Farbverlauf zu erstellen, müssen Sie mindestens zwei Farbknoten definieren. Der Farbknoten ist die Farbe, die einen sanften Übergang anzeigen soll. Gleichzeitig können Sie auch einen Startpunkt und eine Richtung (oder einen Winkel) festlegen. 🎜rrreee🎜Syntax🎜rrreee
  • 🎜<angle></angle>: Verwenden Sie den Winkelwert, um die Richtung (oder den Winkel) des Farbverlaufs anzugeben. Der Winkel vergrößert sich im Uhrzeigersinn. 🎜🎜🎜🎜🎜
  • <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
    );
  }

  

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

Das obige ist der detaillierte Inhalt vonEine kurze Diskussion über die neuen Hintergrundattribute und die Verlaufsfunktion (Gradient) in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!