CSS3 の新しい背景属性とグラデーション関数 (gradient) についての簡単な説明

この記事では、背景 (background) の新しい属性とグラデーション関数 (gradient) を紹介し、どのような新しい背景が提供されるかを確認します。複数のグラデーション効果の制御と実装。

BackgroundBackground

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: 画像のアスペクト比を維持し、背景領域に完全に収まるように背景画像を拡大縮小します。背景領域は部分的に空白になる場合があります。
1 つの値: この値は画像の幅を指定し、画像の高さは暗黙的に自動です。
2 つの値: 最初の値は画像の幅を指定し、2 番目の値は画像の幅を指定します。画像の高さを指定します。 高さ

background-origin

background-origin は、指定された背景画像の原点位置に対する背景の相対領域を指定します background-image 属性。

注: background-attachment を fixed として使用する場合、この属性は無視され、効果はありません。

#border-box
• 背景画像の配置は境界領域に基づきます
padding- box
• パディング領域を基準に背景画像を配置します#content-box
コンテンツ領域を基準に背景画像を配置します
• #background-clip

background-clip

背景クリッピングプロパティは、背景（背景画像または背景色）の描画領域を指定します。

border-box

: 背景領域は境界線まで (ただし境界線よりも下)

• 
  

  padding-box
: 背景領域はパディングまで拡張されます

• 
  # #content-box

  : 背景領域がコンテンツ領域に拡張されます

• 
  text

  :背景はテキストの前景色にトリミングされます。プレフィックス
-webkit-background-clip: text;

• Gradient
  ## を追加する必要があります。 #CSS3 グラデーションを使用すると、2 つ以上の指定した色間のスムーズな移行が可能になります。グラデーション画像を使用する場合と比較して、グラデーションを使用するとダウンロード時間と帯域幅の使用量が削減され、拡大したときの見栄えが良くなります。

線形グラデーション

カラー値は、暗黙の直線に沿って徐々に変化します。

linear-gradient()

によって生成されます。

線形グラデーションを作成するには、少なくとも 2 つのカラー ノードを定義する必要があります。カラー ノードは、滑らかな遷移を示したい色です。同時に、開始点と方向（または角度）を設定することもできます。

/* 渐变轴为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> )

##: 角度の値を使用して、角度の方向 (または角度) を指定します。グラデーション。角度は時計回りに増加します。

• <side-or-corner>：描述渐变线的起始点位置。to top, to bottom, to left 和 to right 这些值会被转换成角度 0 度、180 度、270 度 和 90 度。其余值会被转换为一个以向顶部中央方向为起点顺时针旋转的角度。渐变线的结束点与其起点中心对称。
• <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
  );
}

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

以上がCSS3 の新しい背景属性とグラデーション関数 (gradient) についての簡単な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。