CSSの四大レイアウトレベルとHTMLタグの『エコシステム』(二)---背景層
3478 ワード
背景レイヤは、その名の通り要素の背景であり、背景はCSS属性のbackgroundで実現される.backgroundプロパティは、展開後に多くのブランチプロパティを含む略語プロパティです.
background-color:背景色、この属性を使用して1つの要素に背景色を追加することができ、背景色を追加する値は大きく4つに分けることができます.
background-image:バックグラウンドピクチャ、この属性を使用して1つの要素に1枚以上のバックグラウンドピクチャを追加することができます.ここで見ることができるピクチャは、要素の表面にぴったりと貼られていて、不可分で、この要素の面でしかこのピクチャを見ることができません.ピクチャが大きく、要素が小さいと、ピクチャの表示が不完全になる可能性があります.
背景画像を挿入する方法の例は次のとおりです.
background-repeat:バックグラウンドが重複し、バックグラウンドピクチャを挿入した後、小さなピクチャ、大きなエレメントであれば、エレメント全体の表面が敷かれるまで無限に平らになります.エレメントの表面に完全なピクチャが1枚だけ表示され、平らにしたくない場合は、このプロパティを使用します.例は次のとおりです.
background-position:バックグラウンド位置no-repeat値を使用してバックグラウンドマップを1枚しか挿入できないことを制限すると、要素表面の左上隅に画像が表示されますが、左上隅に画像が表示されたくない場合が多い場合があります.この場合、この属性でバックグラウンド画像の位置情報を変更することができます.値、パーセント、ピクセル、単語などを多く取ることができます.例は次のとおりです.
background-attachment、この属性、私はただ1つの値を取ると言って、fixedです.1つの背景画像がこの属性を設定し、値がfixedである場合、この画像は要素の移動に伴って移動するのではなく、ページに埋め込まれた背景図になり、背景を追加してその属性を設定したこの要素は、「ウィンドウ」のような存在になり、この「ウィンドウ」を通してのみページのこの背景図を見ることができ、その他の場合、この背景図は表示されません.
background-sizeは、背景ピクチャサイズを設定する属性であり、CSS 3に新たに追加された属性の1つであり、その値は画素、パーセンテージ、cover、containなどであってもよい.例は次のとおりです.
background-clipは、border-box、padding-box、content-boxの値をとることができ、この属性は、背景ピクチャがどのブロックおよびその内のブロックに表示されるかを示す.
background-origin、値はborder-box、padding-box、content-boxであり、この属性は背景画像が左上隅にある場合、その原点がどのブロックから始まるかを示す.
以上の属性は背景層のレイアウトの中でよく使われるいくつかの属性で、CSS属性を理解したいのですが、資料を見るだけではあまり役に立ちません.もっと多いのは、まとめて自分で実践し、正しいかどうかを検証し、検証の中で汲み取る知識が、最も堅固です.
転載先:https://www.cnblogs.com/nation-blue/p/6680714.html
background-color:背景色、この属性を使用して1つの要素に背景色を追加することができ、背景色を追加する値は大きく4つに分けることができます.
background-color : red ;
background-color : #ff0000 ;
background-color : rgb(255,0,0) ;
background-color : rgba(255,0,0,1);
/* ， ， */background-image:バックグラウンドピクチャ、この属性を使用して1つの要素に1枚以上のバックグラウンドピクチャを追加することができます.ここで見ることができるピクチャは、要素の表面にぴったりと貼られていて、不可分で、この要素の面でしかこのピクチャを見ることができません.ピクチャが大きく、要素が小さいと、ピクチャの表示が不完全になる可能性があります.
背景画像を挿入する方法の例は次のとおりです.
background-image : url(../images/1.jpg) ;background-repeat:バックグラウンドが重複し、バックグラウンドピクチャを挿入した後、小さなピクチャ、大きなエレメントであれば、エレメント全体の表面が敷かれるまで無限に平らになります.エレメントの表面に完全なピクチャが1枚だけ表示され、平らにしたくない場合は、このプロパティを使用します.例は次のとおりです.
background-repeat：no-repeat ; /* */
background-repeat：repeat-x ; /* X */
background-repeat：repeat-y ; /* Y */background-position:バックグラウンド位置no-repeat値を使用してバックグラウンドマップを1枚しか挿入できないことを制限すると、要素表面の左上隅に画像が表示されますが、左上隅に画像が表示されたくない場合が多い場合があります.この場合、この属性でバックグラウンド画像の位置情報を変更することができます.値、パーセント、ピクセル、単語などを多く取ることができます.例は次のとおりです.
background-position : 50% 50%；
background-position : 20px 200px ;
background-position : center center ;background-attachment、この属性、私はただ1つの値を取ると言って、fixedです.1つの背景画像がこの属性を設定し、値がfixedである場合、この画像は要素の移動に伴って移動するのではなく、ページに埋め込まれた背景図になり、背景を追加してその属性を設定したこの要素は、「ウィンドウ」のような存在になり、この「ウィンドウ」を通してのみページのこの背景図を見ることができ、その他の場合、この背景図は表示されません.
background-sizeは、背景ピクチャサイズを設定する属性であり、CSS 3に新たに追加された属性の1つであり、その値は画素、パーセンテージ、cover、containなどであってもよい.例は次のとおりです.
background-size : 200px 200px ; /* 200*200 */
background-size : 50% 50% ; /* */
background-size : cover ; /* ， */
background-size : contain ; /* ， */background-clipは、border-box、padding-box、content-boxの値をとることができ、この属性は、背景ピクチャがどのブロックおよびその内のブロックに表示されるかを示す.
background-origin、値はborder-box、padding-box、content-boxであり、この属性は背景画像が左上隅にある場合、その原点がどのブロックから始まるかを示す.
以上の属性は背景層のレイアウトの中でよく使われるいくつかの属性で、CSS属性を理解したいのですが、資料を見るだけではあまり役に立ちません.もっと多いのは、まとめて自分で実践し、正しいかどうかを検証し、検証の中で汲み取る知識が、最も堅固です.
転載先:https://www.cnblogs.com/nation-blue/p/6680714.html