CSSスタイルのbackground属性について詳しく解説

background使用法の詳細:

1、background-color 属性要素の背景色を設定します

可能な値

color_name 色の値が色の名の背景色であることを指定します(赤など)

hex_number カラー値が 16 進数値である背景色を指定します (#ff0000 など)

rgb_number カラー値が rgb コードである背景色を指定します (例: rgb(255, 0,0)

透明 デフォルトの背景 色は透明です

2, background-image 属性は要素の背景を設定します image

可能な値

単一の背景画像:background-image :url(a.png)

複数の背景画像:background-image:url(a.png),url(b.png)

線形グラデーション:background-image:-webkit(-repeat)-linear-gradient(方向、ピクセルまたはパーセンテージでのカラー値、ピクセルまたはパーセンテージでのカラー値‐ ‐ off out right out rightps out out out over out over''s according to's' through's' out's' フィールド全体で'--- out-‐out‐without 基底パススルーあり    0%、透明 4px、rgb(0,0,0) 2px

放射状グラデーション:background-image:-webkit(-repeat)-radial-gradient([> || , 最も近いサイズ & gt; 、FARTHEST-CORNER、Contain または Cover3、background-size ラベル要素に適応させます Cover: 背景画像が拡大され、ラベル要素全体のサイズに拡張されます

ピクセル: のサイズを示します背景画像のスケーリング

パーセンテージ: パーセンテージは、画像のサイズを拡大縮小するためのコンテンツ ラベル要素のサイズに基づいています

4。background-position

属性は、背景画像の位置を設定するために使用されます

可能値: left、right、top、bottom、center、pixels、percentage

5、

background-repeat

この属性は、背景画像の位置を設定するために使用されます

可能な値:repeat、repeat-x、repeat-y 、no-repeat、space (トリミングやサイズ変更されません)、round (トリミングされませんが、画像サイズは変更されます)

6、

background-attachment

属性 背景画像をスクロールできるかどうかを設定するために使用されます

可能な値:scroll、fixed

7、

background-clip

この属性は、背景の描画領域を指定するために使用されます

可能な値:bord

er-box、

padding

-box、content- box

8、background-origin

属性は、background-position属性が配置される相対的な位置を指定するために使用されます

可能な値: border-box、padding-box、content-box

拡張子: 正方形を描画します

htmlコード

<p>使用背景绘制方格，使每个文字都在方格里，效果图如下。</p>

cssコード

 p {
     width: 300px;
     height: 300px;
     border-left: 3px solid pink;
     border-top: 3px solid pink;
     background-image: -webkit-linear-gradient(180deg, pink 3px, transparent 3px) , -webkit-linear-gradient(90deg, pink 3px, transparent 3px);
     background-size: 30px;
     line-height: 30px;
     font-size:25px;
     letter-spacing: 5px;    
}

結果

背景を使用して、各テキストが正方形のグリッド内に収まるように正方形のグリッドを描画します。レンダリングは次のようになります。

以上がCSSスタイルのbackground属性について詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。