ホームページ > 記事 > ウェブフロントエンド > CSSスタイルのbackground属性について詳しく解説
可能な値
color_name 色の値が色の名の背景色であることを指定します(赤など)
hex_number カラー値が 16 進数値である背景色を指定します (#ff0000 など)
rgb_number カラー値が rgb コードである背景色を指定します (例: rgb(255, 0,0)
透明 デフォルトの背景 色は透明です
可能な値
単一の背景画像: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([b2623c484142d7574f24df65759c08d2 || , 最も近いサイズ & gt; 、FARTHEST-CORNER、Contain または Cover3、background-size ラベル要素に適応させます Cover: 背景画像が拡大され、ラベル要素全体のサイズに拡張されます
ピクセル: のサイズを示します背景画像のスケーリング パーセンテージ: パーセンテージは、画像のサイズを拡大縮小するためのコンテンツ ラベル要素のサイズに基づいています4。background-position
属性は、背景画像の位置を設定するために使用されます 可能値: left、right、top、bottom、center、pixels、percentage5、background-repeat
この属性は、背景画像の位置を設定するために使用されますbackground-attachment
属性 背景画像をスクロールできるかどうかを設定するために使用されます可能な値:scroll、fixed7、background-clip
この属性は、背景の描画領域を指定するために使用されますpadding
-box、content- boxe388a4556c0f65e1904146cc1a846bee使用背景绘制方格,使每个文字都在方格里,效果图如下。94b3e26ee717c64999d7867364b1b4a3
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 サイトの他の関連記事を参照してください。