背景のこの部分のためのCSS3仕様では、新しいは、複数の背景画像を設定することができ、あなたが背景のサイズを指定することができるよう、いくつかの便利な機能を追加した背景のグラデーションやその他の機能を設定します。新しい背景クリップ、背景起源、背景サイズ、表1に記載されたような3つの属性の仕様で定義されたCSS3の背景プロパティ:
表1 CSS3新しい背景のプロパティ
以上の背景
CSS3は、背景画像の複数の、カンマで区切られたそれぞれの背景、背景画像を表すそれぞれは、上部および下部層は、第1の書き込み背景最上ことがCSSで記述された順に表示されることができます。
そして、次の形式でより多くの背景:
背景:URL(a.jpg)0 0、URL(b.jpg)0 100%;
次のようにここでは、3つのDIVの背景を作るために3枚の写真を使用し、第一の方法は、バックグラウンドの速記の方法で、コードは次のとおりです。
DIVは、タイル張りの背景画像の各セットは繰返さない、三コードの背景の上に背景の参考文献「bg1.jpg」画像、位置DIV位置「00」の最初の層が設けられ、第二の層の背景彼は「200pxの0」の位置に配置「bg2.jpg」画像を引用し、第3層背景「が400ピクセル0」位置に配置「bg3.jpg」画像を引用しました。図1に示されているブラウザで実行の結果:
1つの3重畳背景
次のようにこの速記法に加えて、我々は背景画像、背景リピートと背景の位置を使用して、オープンバックグラウンド属性を分割することができた背景画像に対処するために設けられており、タイル張りの位置、CSSのコードは次のとおりです。
このコードは、上記のコードの書き換え、ブラウザの結果の実施と同じです。背景のグラデーションも背景レイヤーであることは注目に値します。ここでは、divの3つの背景、第1の背景グラデーションの背景レイヤーを設定し、背景は第2層の背景です。次のようにCSSのコードは次のとおりです。
第一層は、左から右へ「RGBA(255,255,0,1)は」「RGBA(255,0,0,0)」勾配背景に、第二の層は「itxdl.jpg」背景画像です。ブラウザで実行した結果を図2に示します:
背景図2傾斜層
2背景サイズ
CSS3还新增了背景尺寸background-size属性,该属性可以设置具体的值,百分比等。该属性的取值及描述如表2:
表2 背景尺寸属性取值及描述
当我们为background-size设置一个值时,那么第二个值会被设置为“auto”。若对背景图片设置两个值时未与背景图本身大小成比例,容易是图片失真或变形。
下面有一个高度和宽度为200px的div,而我们想要将一张宽高为600px的图片作为背景图。我们想要将该图片填充到这个div的话,若没有background-size的属性,我们就需要使用一些软件将这张图片压缩再为设置背景,否则背景图片会溢出。未使用background-size时,CSS代码如下:
在浏览器里运行的结果如图3:
图3 背景图片未使用background-size
在这里我们只能看到“itxdl2.jpg”的左上角的三分之一。在为该背景图片的background-size设置为“200px 200px”、“200px auto”、“auto 200px”、“cover”和“contain”都可以达到全填充的目的。例如,我们在这里使用“200px auto”,增加“background-size: 200px auto”,CSS代码如下:
在浏览器里运行的结果如图4:
图4 背景图片全填充
只有当background-size值为auto时,背景图片才不会变形失真,而其他值都会造成背景图片变形夫真,所以大家使用时需要仔细考虑好,以免给你的制作带来不良效果。
3 background-origin
CSS3可以使用background-orgin属性设置图像的基准位置。该属性的取值及描述如表3:
表3 background-origin属性取值及描述
属性「パディング・ボックス」のデフォルト値は、名前が示す、充填フレーム画像は、描画を開始しています。これは、描き始めたどの領域(ボーダー、パディングまたはコンテンツ)から背景を指定しますが、唯一の位置を描画を開始するために、背景を制御することができた、あなたが国境の背景を描画するために、このプロパティを使用できますが、国境の背景には、驚くべきそれを表示しないようにしていますバックグラウンド・クリップで決定します。背景クリップは、次のセクションで言及されます。
ここでは、国境を反映して、divのボーダー半透明を設定するだけでなく、境界線の背景を反映します。半透明に国境背景の境界線ボックス、のために提供される背景の原点。この場合、画像は以下のように、フレーム境界を埋めるために開始されます:
DIVの背景画像は、境界、図5に示すブラウザで実行した結果から描画を開始します。
5背景画像の基準位置
4背景クリップ
CSS3のbackground-orgin属性は、背景の所定の領域を描画するために使用することができます。バックグラウンド・クリップの制御だけでなく、背景画像が、背景要素の全体の表示範囲を制御します。そして、属性値を表4に記載しました:
表4バックグラウンド由来のプロパティ値と説明
「ボーダー・ボックス」などの属性のデフォルト値。背景に表示することのできる領域を指定し、それは場所を描画を開始する背景には何の関係もありません、場所の背景を描画することは、その後、背景画像の同等は、作物の一環として、地域のコンテキストで表示されていない、表示領域の背景に表示されない場合があります。
ここで、私はDIV ":10pxのパディング" に設定します。バックグラウンド・クリップは、コンテンツボックスの背景が提供されます。次のように境界セクタから背景画像を充填開始し、CSSコードがあります:
図6に示すブラウザで実行の結果:
6背景画像が描画領域指定しました