背景の取得HTML \ CSSプロパティ

序文

   なぜ私はこれを書いていますか?私は、スタイルシートは、次のような、そのような言葉が含まれているソースコードを見ているので:

    背景:URL( "../ IMG / bg_idx_01.jpg")リピート-Xスクロール50%0 #FFFFFF。  

    そして私には、だけでなく、初心者、唯一の背景色:、背景画像:...など個人と、上記のように確かに便利ではない、我々はいくつかのノートを行うことを学ぶようにします。もちろん、間違いなく良い公式文書を表示するには

   http://www.w3school.com.cn

背景速記プロパティ

  以下のように、いわゆる背景速記プロパティは声明の中ですべてのプロパティを設定して、それがプロパティを設定できます。

  背景色は:使用に背景色を設定します

  背景画像:背景画像の規定は、使用されます

  背景位置:背景画像の所定の開始位置を使用して

  背景サイズ:背景画像の所定サイズ

  背景リピート:背景画像を提供するために、どのように繰り返し

  背景の起源:背景画像の所定の領域を位置決めします

  背景クリップ:背景の所定の領域を描画

  背景アタッチメント:ページの残りの部分で固定したり、背景画像かどうかを指定スクロール

  継承:規定は親要素のbackground属性の設定から継承しなければならない(PS(それのようなこれ、エマ、良い優雅な、そしてオブジェクト指向の継承を?):IE7およびそれ以前のブラウザでは、DOCTYPEを追加するための「継承」.IE8の必要性をサポートしていません! .IE9サポート「継承」、ああ、何とIEブラウザ)

  あなたも許可されている値を設定しない場合はもちろん、詠唱に合わせてデフォルト値に設定されていません。例えば、私は上記の

   背景:URL( "../ IMG / bg_idx_01.jpg")リピート-Xスクロール50%0 #FFFFFFが、それは、図3のように表されます。

背景色

  この特性は、以下のように、多くの場合、分配層、Iは、第1の層がライトグリーン色に設定されている次のサンプルコードを見て、それを使用、DIV層状使用する場合は特に、これは頻繁に使用される、塗りつぶしの色の背景に定義されます


結果は何色、ので、ない心配を行う見つけられませんでした表示するには、この時間スタイルのdivに表示されません何のコンテンツがありませんもちろん、私は理由として、ここでは、ない言及(約の高さ、幅のデフォルト値)に、これは絶対的に少ないと言っています、 。次のようにただ、divのそれに少し何かを追加


背景リピート

  上述したように、属性は、タイルモード画像を定義する、可能な値は次のとおりです。


 60×30の画像をtest.pngフォルダサンプルコードプロジェクトに保存されているI IMGファイル最初に私が何かを聞かせて、次のようにまず、背景画像を追加


ノー繰り返し、:背景リピートがショー、背景リピートスタイルのDIV1年に追加されるの効果に合わせて繰り返すように設定されていないため、この効果が発生します


この時点では表示がマップですが、見てどのように少しぎこちないで、各色のブロックの私のイメージが正方形である、長方形は、十分な長さ、高さの小さなように見えた、私を与えるためにどのようになると見ることができます以下は、それを変更します。どのように変化しますか?このような背景のサイズとしてバックグラウンドサイズで表現私の最初の思想:90PX 30px;以下のように


層のDIVの特性、及び層の下に配置された層の高さの層1の幅に応じてデジタルコンテンツが高さの周りに配置されたので、何の変化、まあは認められなかった、これは、以下のとおりであります


より直感的に検索するには、I層は、画像が完全に表示され、この時点で、高さtest.pngの高さの上方に設けられています。

背景サイズ

  この属性は、背景画像のサイズを指定し、公式文書を参照してください、私はその親のdiv層の高さにステップインしますが、プロパティの値の内容は、次の下に掲示され、背景画像が完全に表示され、60個のピクセルとなり、


  次の表の背景サイズの4つの形式

  (1)バックグラウンドサイズ:長さ表示

   私たちの共通の理解その背景サイズのこの症状:幅高さ;下記の例

  

  (2)バックグラウンドサイズ:パーセンテージ表示

    このプロパティは困難ケン少し理解することができ、上側の第1表は、「理解すべきであることを特徴とする親要素クラスDIV1と、背景画像の親要素は、その層への参照である、すなわち、A層背景の割合が幅と高さを設定する」を。異なる次のコードを比較することにより、

 

 設定上記のように、比較のために、私の親要素、すなわち幅所与divレイヤは、(実際の幅我々のテスト画像を90個​​の画素、30個の画素の高さ)、背景サイズ180個のピクセルと60個のピクセルの高さである:50% 50%は、すなわち、背景画像は90PX(180ピクセル×50%= 90PX)、高さ30px(= 30px 60PX * 50%)の幅が提供されます。ここで再び、バックグラウンド・サイズ:100%、20%、次


このとき、背景画像は、あなたがそれを理解するより、これはヘクタールで、180ピクセル(180ピクセル×100%)の幅、高さ12ピクセル(60PX * 20%)を表示しました

(3)バックグラウンドサイズ:カバー表示

  直接マップの説明に

  

   このプロパティは、完全背景領域、即ち、親要素を充填する背景画像を作成します。ここでは実際には、それを理解し、背景サイズ:カバー、背景サイズに相当する:100%100%;(私は間違った文を消さ赤い線についての声明、それは真実ではないですが、また、それらの保持アラートに、私はこのtest.pngのPSを行うために使用することはこのような背景サイズを発揮することはできません:カバーと背景サイズ:これら2つの効果が含まれています私はあなたが例で言えば、W3SCHOOLに行くことを願って(表示するにはここをクリックしてください)塗りつぶしの両方の内側とストレッチ画像を)、およびC#

(4)バックグラウンドサイズ:表示含みます

   テキストは、例を参照して行ってください、上述したW3SCHOOL

  背景位置

   構文は次のとおりです。

   

    このプロパティの役割は非常にNiuaあり、公式の説明は「提供することを目的とするの使用イメージ開始位置を。」開始位置を使用しますか?これはどのようにそれを理解しますか?ボーの1人のオンライン友人は、この特定の詳細、特別なバーの話に専念します!彼のブログ記事入力するには、ここをクリックし、彼の友人の以下の説明への参照が存在します。

    通常、アイコンの一部を使用して、いくつかのWebページのような、画像ファイルに格納されている場合

      

    私のためならば、私は単一のファイルにPSカット計画や設計の使用を考えてますが、背景の位置を使用すると、「切断計画」効果を達成することができます。

    ページがロードされていない前に、一般的に言って、DIVとIMG画像間の親要素は、独立して、ファイルシステム内に存在します

    

   ページが読み込まれた後、背景の左上隅に変化は層、すなわち(0,0)の位置に重なる親要素DIVのデフォルトの左上隅が存在していない場合は特に

   

  このとき、バックグラウンド・麻薬が設定されていない場合、デフォルトではバックグラウンドポジションである:0PX 0PX; I図の例では、属性が設定されていない場合、デフォルトは頂点、図のように、左揃えのトップです。

  

  したがって、それはことを意味し、XPOSとYPOS:だから構文背景位置に応じた場合、背景画像XPOSと(すなわち、左上隅)位置の所定の頂点が親要素の頂点に要素(x軸に沿っXPOS負の左方向の動きを移動します、右方向への移動は、Y軸に沿って)移動要素YPOS(YPOS前進、上方移動負)陽性です

   例えば、私はここに背景位置を設定:30px 0PX、頂点が図の30pxの右方向に移動させることIMGこの文脈手段は、次のような効果があります。

   

   セットバックグラウンド位置:-15px -15px、次のようにIMG平均バックグラウンドは、頂点15ピクセル左、右15ピクセル移動して、効果があります。

   

   ここで最優先し、我々はそのような艶消しのように、このプロパティの実装上の問題を使用する方法を知っているだろう、アイコンが多状態を表示し、はい、新しい知識を得ます!

背景の原点

   この属性は、背景画像の位置エリアを指定し、「ページが読み込まれた後に呼ばれたときに、トップの位置の人気の理解が親要素のdivの背景画像に頂点の位置を左に、私はそこにある場合は特に、背景の位置の上に話しません背景画像の左上隅への変更がある親要素DIV層の重なり、(0,0)の位置」のデフォルトの左上隅で、変更が行われた場合は特に、これらの言葉は適切ではありません。

   次のようにしているその構文の機能を見てください:

   

    次のように比較のために3つの値の影響を容易にするために、クラスIのDIV1層は、パディングと内側の間隔境界余白を追加しています

   

  。今、図に直接影響、DIV層のbackground-起源でステートメントを追加:ボーダー・ボックス、レンダリングを

   

   背景の起源:コンテンツ・ボックス;図の効果として、

   

  背景の起源:パディングボックス;図の効果として、

   

  デフォルト設定なしフィギュア、背景の原点から見ることができパディングボックスのためです。

背景クリップ

   この属性は、描画領域の背景を指定し、次のように、公式文書の構文は次のとおりです。

  

  この属性の規定は地域の状況を描くことであることに注意してください、そして、何がと数え、「エリアの背景を描く」ことを?そこに選択の3つのプロパティ(ボーダー・ボックス、パディングボックスあり 、コンテンツ・ボックス) 以上、私がブロックされた前に、次の背景があり、このため、バックグラウンドでは何の関係もありません。


  その後、いくつかの比較を行い、バックグラウンド・クリップのプロパティを追加

        

いくつかの比較、明白な違いを行います。それが提供されていないバックグラウンド・クリップで見ることができ、同時に、デフォルトではボーダーボックスです。

背景アタッチメント

   このプロパティは説明しなかった、と比較的容易に理解するために、それを見るために直接Quguanネットワークを説明し、表示するにはここをクリックしてください

/ ************************************************* *分割ライン*********************************************** ************ /

速記プロパティ

   すでに財産の背景について説明したようにここでは、その速記構文について言うには、以下の、いわゆるは、すべての基礎の前を開始。今、私は次のように、簡単な例を記述するために開始します。


 どの背景:URL(IMG / test.png)ノー・リピート90PX 30pxライトグリーン;この文90PX 30px、私の意図は、バックグラウンド・サイズを設定することです:90PX 30pxの;しかし、結果は、それがバックグラウンド位置のアウトであることを示します効果は、検索データによって、次のように簡略プロパティのような背景のルックスがあると述べました。

  背景:背景画像の背景リピート背景位置背景アタッチメント地色。

  速記プロパティは、この機能を含めるかどうかに、バックグラウンドサイズに含まれていない、私はそれが任意のかではないと言うことができない、唯一の最初の伏線埋め、そして出会いを説明した後に戻ってくることを言うことができます。

 このように、フロントIの導入は、読み

  

エピローグ

  ここでは、HTMLは、バックグラウンドで私はおそらく次のセクションで、別の知識ポイントを書き込む準備ができて、それを考え出しました。


公開された143元の記事 ウォンの賞賛161 ビュー121万+

おすすめ

転載: blog.csdn.net/mybelief321/article/details/50189805