[Preliminary web] CSSの背景(背景)

背景色
background-color:颜色值;   默认的值是 transparent  透明的
背景画像(画像)
background-image : none | url (url) 
パラメータ 効果
なし 背景画像なし(デフォルト)
url 絶対アドレスまたは相対アドレスを使用して背景画像を指定します

背景画像の背後にあるアドレス。URLに引用符を追加しないでください

背景のタイリング(繰り返し)
background-repeat : repeat | no-repeat | repeat-x | repeat-y 
パラメータ 効果
繰り返す 背景画像は縦長と横長に並べて表示されます(デフォルト)
リピートなし 背景画像はタイリングされていません
リピート-x 背景画像は水平に並べて表示されます
リピート 背景画像は縦に並べて表示されます
背景の位置
background-position : length || length

background-position : position || position 
パラメータ 価値
長さ パーセンテージ|浮動小数点数と単位識別子で構成される長さの値
ポジション 上|中央|下|左|中央|右
  • background-image属性を最初に指定する必要があります
  • 位置の後にx座標とy座標が続きます。位置名詞または正確な単位を使用できます。
  • 2つの値を指定し、どちらもロケーション名である場合、2つの値の順序は関係ありません。たとえば、左上と左上は同じ効果があります。
  • 方向名詞を1つだけ指定した場合、他の値はデフォルトで中央揃えになります。
  • 位置の後に正確な座標が続く場合、最初の座標はxでなければならず、2番目はyでなければなりません
  • 1つの値のみを指定する場合、値はx座標でなければならず、もう1つはデフォルトで垂直方向に中央揃えされます
  • 指定された2つの値が正確な単位と方位名の混合である場合、最初の値はx座標で、2番目の値はy座標です
背景添付
background-attachment : scroll | fixed 
パラメータ 効果
スクロール 背景画像はオブジェクトのコンテンツでスクロールされます
修繕 修正された背景画像
略記

背景:属性値の書き込み順序に必須の標準はありません

透明な背景
background: rgba(0, 0, 0, 0.3);
  • 最後のパラメータは、0〜1のアルファ透明度の値の範囲です
  • 0.3の0を省略して、背景を次のように記述します。rgba(0、0、0、.3);
  • 注:半透明の背景とは、ボックスの背景が半透明であり、ボックスのコンテンツには影響がないことを意味します。
  • ie9より前のバージョンはサポートされていません。
の属性 効果 価値
背景色 背景色 定義済みのカラー値/ 16進数/ RGBコード
背景画像 背景画像 url(画像パス)
バックグラウンドリピート タイリングするかどうか 繰り返し/繰り返しなし/繰り返し-x /繰り返し-y
背景の位置 背景の場所 長さ/位置はそれぞれx座標とy座標です。正確な数値単位がある場合は、Xの後にYが続くという表現に従う必要があります。
背景添付ファイル 背景が固定またはスクロールされている スクロール/固定
背景の省略表記 よりシンプル 背景色背景画像アドレス背景タイル背景スクロール背景位置;それらには順序がありません
透明な背景 ボックスを半透明にします 背景:rgba(0,0,0,0.3);の後には4つの値が必要
163の元の記事を公開 18を賞賛 7683を訪問

おすすめ

転載: blog.csdn.net/xcdq_aaa/article/details/105370060
おすすめ