ホームページ > 記事 > ウェブフロントエンド > 【CSS3】-背景-オリジン背景-クリップ背景-サイズ_html/css_WEB-ITnose
【CSS3】-背景-オリジン背景-クリップ背景-サイズ_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:45:461474ブラウズ
background-origin
要素の背景画像の元の開始位置を設定します。
構文:
background-origin ： border-box | padding-box | content-box;
パラメータはそれぞれ、背景画像が ボーダー 、 パディング (デフォルト値) 、または コンテンツエリア から表示を開始するかどうかを示します。
効果は次のとおりです:
なお、、背景が no-repeat でない場合、この属性は無効であり、境界線から開始して表示されます。
例:
<!DOCTYPE html><html><head> <meta charset="utf-8"><title>背景原点</title><style type="text/css">.wrap { width:220px; border:20px dashed #000; padding:20px; font-weight:bold; color:#000; background:#ccc url(http://static.mukewang.com/static/img/logo_index.png) no-repeat; background-origin:content-box;//内容区域显示 position: relative;}.wrap span { position: absolute; left:0; top:0;}.content { height:80px; border:1px solid #333;}</style> </head> <body><div class="wrap"><span>padding</span> <div class="content">content</div></div></body></html> 効果:
background-clip
は、実際のニーズに合わせて背景画像を適切に トリミングするために使用されます。
構文:
rrreeパラメータはそれぞれ、 境界線、 または からの塗りつぶし 、または コンテンツ領域 から外側に背景のトリミングを示します。 no-clipはクリッピングなしを意味し、パラメータborder-boxと同じ効果を示します。 backgroud-clip のデフォルト値は border-box です。
効果は以下のとおりです:
例:
background-clip ： border-box | padding-box | content-box | no-clip
効果: パディングボックス効果:
background-size
長さの値として背景画像のサイズを設定します。 またはパーセント表示、coverとcontainを使用して画像を拡大縮小することもできます。
構文:
<!DOCTYPE html><html><head> <meta charset="utf-8"><title>背景裁切</title><style type="text/css">.wrap { width:220px; border:20px dashed #000; padding:20px; font-weight:bold; color:#000; background:#ccc url(http://static.mukewang.com/static/img/logo_index.png) no-repeat; background-origin: border-box; background-clip:padding-box; position: relative;}.wrap span { position: absolute; left:0; top:0;}.content { height:80px; border:1px solid #333;}</style> </head> <body><div class="wrap"><span>padding</span> <div class="content">content</div></div></body></html> 値の説明:
1、auto: デフォルト値、背景画像の元の高さと幅は変更されません
2、: ペアで表示されます。 200px 50px など、背景画像の幅と高さを最初の 2 つの値に設定します。値が設定されたら、それを画像の幅の値として使用して ; <パーセンテージ>
: 0%~100 % の間の任意の値。背景画像の幅と高さを、要素の幅と高さに前のパーセンテージを乗算して得られる値に設定します。値を設定する場合は、上記と同じです。4、cover
: 名前が示すように、cover、つまり、背景画像がコンテナ全体を埋めるように拡大縮小されます 5: を含む、つまり、背景画像は、片側がコンテナの端に近づくまで
、比例して拡大縮小されます。ヒント: 右側の編集ウィンドウに独自のコードを入力して、さまざまな値の効果を試すことができます。
複数の背景
複数の背景、つまり、CSS2 の
background
属性とorigin
、
clip、および size で構成される新しい背景の複数のオーバーレイ。 カンマ区切る各値のセット。分解で記述された場合、背景画像が複数あるが、他の属性が 1 つしかない場合 (たとえば、background-repeat が 1 つだけある場合)、すべての背景画像がこの属性値を適用することを意味します。 文法上の略語は次のとおりです:
background-size: auto | <长度值> | <百分比> | cover | contain上記の略語は次の形式に分解できます: background-image:url1,url2,...,urlN;
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
注:
カンマで区切る 背景の各グループの省略値。 サイズの値がある場合は、その後に位置を指定し、「/」で区切る必要があります。
- 背景画像が複数あるが、他に 1 つしかない場合属性 (たとえば、background-repeat が 1 つだけある) の場合、すべての背景画像がこのプロパティ値を適用することを示します。
- 背景色は 1 つだけ設定できます。
- 例:
- 3 つの別々の写真があります:
マルチ背景テクノロジーを使用して次のことを実現します:
例:
background-repeat : repeat1,repeat2,...,repeatN;backround-position : position1,position2,...,positionN;background-size : size1,size2,...,sizeN;background-attachment : attachment1,attachment2,...,attachmentN;background-clip : clip1,clip2,...,clipN;background-origin : origin1,origin2,...,originN;background-color : color;
効果: