ブラザーズHTML5 CSS3の効果のITバンドチュートリアルCSS3プロパティの背景

5f16a58a57bc47108e1c532aebeafd05.jpg

 

背景のこの部分のためのCSS3仕様では、新しいは、複数の背景画像を設定することができ、あなたが背景のサイズを指定することができるよう、いくつかの便利な機能を追加した背景のグラデーションやその他の機能を設定します。新しい背景クリップ、背景起源、背景サイズ、表1に記載されたような3つの属性の仕様で定義されたCSS3の背景プロパティ:

表1 CSS3新しい背景のプロパティ

画像/ 20191122 / 9d5dcb70766ee14292309f604cb7d79a

以上の背景

CSS3は、背景画像の複数の、カンマで区切られたそれぞれの背景、背景画像を表すそれぞれは、上部および下部層は、第1の書き込み背景最上ことがCSSで記述された順に表示されることができます。

そして、次の形式でより多くの背景:

背景:URL(a.jpg)0 0、URL(b.jpg)0 100%;

次のようにここでは、3つのDIVの背景を作るために3枚の写真を使用し、第一の方法は、バックグラウンドの速記の方法で、コードは次のとおりです。

画像/ 20191122 / 74216d2d6fedf5cb4eae8ae78148ca0c

 

DIVは、タイル張りの背景画像の各セットは繰返さない、三コードの背景の上に背景の参考文献「bg1.jpg」画像、位置DIV位置「00」の最初の層が設けられ、第二の層の背景彼は「200pxの0」の位置に配置「bg2.jpg」画像を引用し、第3層背景「が400ピクセル0」位置に配置「bg3.jpg」画像を引用しました。図1に示されているブラウザで実行の結果:

画像/ 20191122 / 1c032ad78f18098ac5ed5a89cbe7ddcd

1つの3重畳背景

 

次のようにこの速記法に加えて、我々は背景画像、背景リピートと背景の位置を使用して、オープンバックグラウンド属性を分割することができた背景画像に対処するために設けられており、タイル張りの位置、CSSのコードは次のとおりです。

image/20191122/771fac05c053c14042e74c826b44044d

 

このコードは、上記のコードの書き換え、ブラウザの結果の実施と同じです。背景のグラデーションも背景レイヤーであることは注目に値します。ここでは、divの3つの背景、第1の背景グラデーションの背景レイヤーを設定し、背景は第2層の背景です。次のようにCSSのコードは次のとおりです。

image/20191122/fd914f3a88eddec2431a4351c7720aed

 

第一層は、左から右へ「RGBA(255,255,0,1)は」「RGBA(255,0,0,0)」勾配背景に、第二の層は「itxdl.jpg」背景画像です。ブラウザで実行した結果を図2に示します:

image/20191122/87b3075010ef2e0689a4d6cf20d1ac81

背景図2傾斜層

 

2背景サイズ

CSS3还新增了背景尺寸background-size属性,该属性可以设置具体的值,百分比等。该属性的取值及描述如表2:

表2  背景尺寸属性取值及描述

 

 image/20191122/586662f2bfd0c291e0fba3b37b1cde49

 

当我们为background-size设置一个值时,那么第二个值会被设置为“auto”。若对背景图片设置两个值时未与背景图本身大小成比例,容易是图片失真或变形。

下面有一个高度和宽度为200px的div,而我们想要将一张宽高为600px的图片作为背景图。我们想要将该图片填充到这个div的话,若没有background-size的属性,我们就需要使用一些软件将这张图片压缩再为设置背景,否则背景图片会溢出。未使用background-size时,CSS代码如下:

image/20191122/0255eafc7faa01513e299d229fd3ad2f

 

在浏览器里运行的结果如图3:

image/20191122/bf50700cf7d8ea7dc1ac956b938e5c86

图3  背景图片未使用background-size

 

在这里我们只能看到“itxdl2.jpg”的左上角的三分之一。在为该背景图片的background-size设置为“200px 200px”、“200px auto”、“auto 200px”、“cover”和“contain”都可以达到全填充的目的。例如,我们在这里使用“200px auto”,增加“background-size: 200px auto”,CSS代码如下:

image/20191122/abcbca40941be394d090c39b1963111c

 

在浏览器里运行的结果如图4:

 image/20191122/fcdba02b0cecd4df881901fe7ef2d4bb

图4  背景图片全填充

 

只有当background-size值为auto时,背景图片才不会变形失真,而其他值都会造成背景图片变形夫真,所以大家使用时需要仔细考虑好,以免给你的制作带来不良效果。

 

3  background-origin

CSS3可以使用background-orgin属性设置图像的基准位置。该属性的取值及描述如表3:

表3  background-origin属性取值及描述

 

 image/20191122/7365771dcb0a38ceef4f0ddf907bbee8

 

属性「パディング・ボックス」のデフォルト値は、名前が示す、充填フレーム画像は、描画を開始しています。これは、描き始めたどの領域(ボーダー、パディングまたはコンテンツ)から背景を指定しますが、唯一の位置を描画を開始するために、背景を制御することができた、あなたが国境の背景を描画するために、このプロパティを使用できますが、国境の背景には、驚くべきそれを表示しないようにしていますバックグラウンド・クリップで決定します。背景クリップは、次のセクションで言及されます。

ここでは、国境を反映して、divのボーダー半透明を設定するだけでなく、境界線の背景を反映します。半透明に国境背景の境界線ボックス、のために提供される背景の原点。この場合、画像は以下のように、フレーム境界を埋めるために開始されます:

image/20191122/50fbe8475263f5162c80f97781608686

 

DIVの背景画像は、境界、図5に示すブラウザで実行した結果から描画を開始します。

image/20191122/da2afa3bc48cd1daf8325e732ec94a21

5背景画像の基準位置

 

4背景クリップ

CSS3のbackground-orgin属性は、背景の所定の領域を描画するために使用することができます。バックグラウンド・クリップの制御だけでなく、背景画像が、背景要素の全体の表示範囲を制御します。そして、属性値を表4に記載しました:

表4バックグラウンド由来のプロパティ値と説明

image/20191122/805c000643f63a10b9675a917d4bc68f

「ボーダー・ボックス」などの属性のデフォルト値。背景に表示することのできる領域を指定し、それは場所を描画を開始する背景には何の関係もありません、場所の背景を描画することは、その後、背景画像の同等は、作物の一環として、地域のコンテキストで表示されていない、表示領域の背景に表示されない場合があります。

ここで、私はDIV ":10pxのパディング" に設定します。バックグラウンド・クリップは、コンテンツボックスの背景が提供されます。次のように境界セクタから背景画像を充填開始し、CSSコードがあります:

image/20191122/de385e2d40e290a52569693ecb582911

 

図6に示すブラウザで実行の結果:

image/20191122/5ad779c9d1d7fdd00e75c7b620e86237

6背景画像が描画領域指定しました

おすすめ

転載: www.cnblogs.com/itxdl/p/11933110.html