【CSS3】-背景-オリジン背景-クリップ背景-サイズ_html/css

【CSS3】-背景-オリジン背景-クリップ背景-サイズ_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:45:46

オリジナル

1559 人が閲覧しました

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],...

ログイン後にコピー

注:

カンマで区切る背景の各グループの省略値。サイズの値がある場合は、その後に位置を指定し、「/」で区切る必要があります。

例:
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;

ログイン後にコピー

効果: