Une brève discussion sur les nouveaux attributs d'arrière-plan et la fonction de dégradé (gradient) dans CSS3

Cet article présente les nouveaux attributs et fonctions de dégradé (gradient) de l'arrière-plan (background) pour voir quels nouveaux contrôles d'éléments d'arrière-plan et divers dégradés sont fournis. Réalisation de effets. 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>

  Arrière-plan

  background est l'abréviation de plusieurs attributs d'arrière-plan,

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

  
  Remarque : Si Si il existe une valeur background-size, elle doit être suivie de background-position et séparée par "/"

  background-image

  🎜background-image peut ajouter plusieurs images d'arrière-plan et différentes images sont séparées par des virgules. Toutes les images sont affichées en haut. .Pour le premier. Définissez plusieurs images png pour créer l’effet de superposition de plusieurs images d’arrière-plan. 🎜

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

  🎜🎜🎜 Recommandation : Lorsque vous utilisez une image d'arrière-plan, il est préférable de définir également la couleur d'arrière-plan (background-color) sur planB lorsque l'image d'arrière-plan n'est pas prise en charge. 🎜

  background-size

  🎜CSS3 Auparavant, la taille de l'image d'arrière-plan était déterminée par la taille réelle de l'image. En CSS3, l'attribut background-size peut spécifier la taille de l'image d'arrière-plan, soit en pixels, soit en pourcentage (la taille en pourcentage de la largeur et de la hauteur de l'élément parent). 🎜🎜L'image peut conserver sa taille d'origine, ou être étirée à une nouvelle taille, ou mise à l'échelle à la taille de l'espace disponible de l'élément tout en conservant ses proportions d'origine : 🎜
  • couverture code > : conservez les proportions de l'image et redimensionnez l'image d'arrière-plan pour couvrir complètement la zone d'arrière-plan. Certaines parties de l'image d'arrière-plan peuvent ne pas être visibles.
  • contenir : conservez les proportions de l'image, redimensionnez l'image d'arrière-plan pour qu'elle s'adapte complètement à la zone d'arrière-plan, et la zone d'arrière-plan peut être partiellement vide.
  • Une valeur : cette valeur spécifie la largeur de l'image et la hauteur de l'image est implicitement automatique.
  • Deux valeurs : la première valeur spécifie la largeur de l'image et la la deuxième valeur spécifie la hauteur de l'image

  background-origin

  🎜background-origin spécifie l'arrière-plan spécifié image background La zone relative à l'arrière-plan de la position d'origine de l'attribut -image. 🎜🎜Remarque : Lors de l'utilisation de background-attachment comme fixed, cet attribut sera ignoré et n'aura aucun effet. 🎜🎜🎜
  • border-boxL'image d'arrière-plan est placée avec la zone de bordure comme référence
  • padding-boxL'image d'arrière-plan est placée avec la zone de bordure zone de remplissage comme référence Référence
  • content-boxLe placement des images d'arrière-plan est basé sur la zone de contenu

  background- clip

  🎜background-clip L'attribut background clipping spécifie la zone de dessin de l'arrière-plan (image ou couleur d'arrière-plan). 🎜
  • 🎜border-box : La zone d'arrière-plan s'étend jusqu'à la bordure (mais en dessous de la bordure) 🎜🎜🎜🎜
  • 🎜padding-box : zone d'arrière-plan Étendre au rembourrage🎜🎜🎜🎜
  • 🎜content-box : La zone d'arrière-plan s'étend jusqu'à la zone de contenu🎜🎜🎜🎜
  • 🎜text : L'arrière-plan est recadré en texte La couleur de premier plan. Il faut ajouter le préfixe -webkit-background-clip: text;🎜🎜🎜🎜

  Dégradés

  🎜Dégradés CSS3) permet vous permet d'afficher une transition douce entre deux ou plusieurs couleurs spécifiées. Par rapport à l'utilisation d'images dégradées, les dégradés peuvent réduire le temps de téléchargement et l'utilisation de la bande passante, et avoir une meilleure apparence lors d'un zoom avant. 🎜

  Dégradé linéaire

  🎜Les valeurs de couleur évoluent progressivement le long d'une ligne droite implicite. Produit par linear-gradient(). 🎜🎜Afin de créer un dégradé linéaire, vous devez définir au moins deux nœuds de couleur. Le nœud de couleur est la couleur pour laquelle vous souhaitez afficher une transition douce. En même temps, vous pouvez également définir un point de départ et une direction (ou un angle). 🎜rrreee🎜Syntaxe🎜rrreee
  • 🎜<angle></angle> : utilisez la valeur d'angle pour spécifier la direction (ou l'angle) du dégradé. L'angle augmente dans le sens des aiguilles d'une montre. 🎜🎜🎜🎜🎜
  • <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
    );
  }

  

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!