css3 背景 note_html/css_WEB-ITnose-htmlチュートリアル-php.cn

css3 背景

css 背景には主に 5 つの属性が含まれます:

background-color

	background-color:transparent || <color>

ログイン後にコピー

要素の背景色を設定するために使用されます。デフォルト値は、transparent (透明)、使用可能な色の名前、RGB カラー、hls です。値、16 進数システム値は色を指定します。

background-image

rrree

要素の背景画像を設定するために使用されます。デフォルト値は none です。相対アドレスまたは絶対アドレスを使用できます。

background-repeat

 	background-image:none || <url>

ログイン後にコピー

要素ボックスモデルにおける要素の背景画像の配置方法を設定するために使用されます。デフォルト値は、X 軸方向と Y 軸方向に同時にタイル表示されます。 x 軸方向のみをタイル表示します。repeat-y は、y 軸を逆方向にタイル表示するだけです。no-repeat はタイル表示しません。

background-attachment

	background-repeat:repeat || repeat-x || repeat-y || no-repeat

ログイン後にコピー

要素の背景画像を固定するかどうかを設定するために使用します。デフォルト値はスクロールであり、固定されていません。固定、固定。

background-position

	background-attachment:scroll || fixed

ログイン後にコピー

要素の背景画像の位置を設定するために使用されます。デフォルト値は (0,0) || (0%,0%) || (左上) です。特定の割合または数値、キーワードを使用することもできます。

CSS3では、4つの新しい属性が追加されました。

background-origin

background-origin属性は主にbackground-position属性の基準原点を決定する、つまり背景画像を配置する際の開始点を決定するために使用されます。

	background-position:<percentage> || <length> || [left | center | right] [,top | center | bottom]

ログイン後にコピー

古いバージョンのブラウザでは、属性値はpadding、border、contentです。

Padding-box (padding): デフォルト値、paddingの外端から背景画像を表示するbackground-positionの開始位置を決定します。

border-box (border): ボーダーの外端から背景画像を表示するbackground-positionの開始位置を決定します。

Content-box(content): コンテンツの外縁から背景画像を表示するためのbackground-positionの実際の位置を決定します。

background-origin:padding-box || border-box || content-box

ログイン後にコピー

デフォルトでは、画像はボックスパディングの左上隅から始まり、境界線の外縁の右下隅に達します。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>	div{		width: 100px;		height: 100px;		border:10px dashed;		padding:10px;		background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0;		background-origin:padding-box;	}</style></head><body>	<div></div></body></html>

ログイン後にコピー

値がborder-boxの場合、画像はボックスの境界線の左上隅から始まり、境界線の右下隅に到達します。

div{	width: 100px;	height: 100px;	border:10px dashed;	padding:10px;	background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0;	background-origin:border-box;}

ログイン後にコピー

値が content-box の場合、画像はボックスのコンテンツの左上隅から始まり、境界線の右下隅で終わります。

注：background-attachment が修正されると、background-origin は無効になります。

background-clip

主に背景画像のクリッピング領域を定義するために使用されます。属性値はbackground-originと同様です。

div{	width: 100px;	height: 100px;	border:10px dashed;	padding:10px;	background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0;	background-origin:content-box;}

ログイン後にコピー

旧バージョンの属性値はborderとpaddingです。
border-box: デフォルト値、要素の背景画像が要素の境界領域から外側にクリップされます。
Padding-box: 要素の背景画像がパディング領域の外側に切り取られます。
content-box: 要素の背景画像がコンテンツ領域の外側に切り取られます。

background-clip:border-box || padding-box || content-box

ログイン後にコピー

border-boxはデフォルト値で、境界線の外側の画像を自動的にカットします。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>	div{		width: 100px;		height: 100px;		border:10px dashed;		padding:10px;		background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0;		background-origin:border-box;		background-clip:border-box;	}</style></head><body>	<div></div></body></html>

ログイン後にコピー

値がpadding-boxの場合、paddingの外側の領域が切り取られます。

div{	width: 100px;	height: 100px;	border:10px dashed;	padding:10px;	background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0;	background-origin:border-box;	background-clip:padding-box;}

ログイン後にコピー

値が content-box の場合、コンテンツの外側の領域が切り取られます。

background-size

主に背景画像のサイズを指定するために使用されます。

div{	width: 100px;	height: 100px;	border:10px dashed;	padding:10px;	background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0;	background-origin:border-box;	background-clip:content-box;}

ログイン後にコピー

auto: デフォルト値、背景画像の元の高さと幅が維持されます。
: 特定の整数値を取得すると、背景画像のサイズが変更されます。
: 値はパーセントで、要素の幅に応じて背景画像のサイズが変更されます。
カバー: 背景画像をコンテナ全体に合わせて拡大します。ただし、背景画像が歪んでしまいます。
含む: 背景画像自体の幅と高さの比率を維持し、幅または高さが定義された背景に適合する領域に背景画像を拡大縮小します。

値を取得する際、2つまたは1つを設定できます。 1 つの値を取得する場合、背景画像の幅が指定され、2 番目の値は高さである auto に相当します。この場合、背景画像の高さを比例して自動的に拡大縮小することができます。

background-size:auto || <length> || <perentage> || cover || contain

ログイン後にコピー

デフォルト値はAutoで、背景画像のサイズ比率を維持します。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>	div{		width: 300px;		height: 200px;		border:10px dashed;		padding:10px;		background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0;		background-size:auto;	}</style></head><body>	<div></div></body></html>

ログイン後にコピー

幅と高さを指定して、背景画像のサイズを変更します。

div{	width: 300px;	height: 200px;	border:10px dashed;	padding:10px;	background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0;	background-size:250px 200px;}

ログイン後にコピー

パーセンテージを指定する場合、値はボックスの幅と高さに基づきます。上の例では、ボックスの幅と高さは 300px です。

div{	width: 300px;	height: 200px;	border:10px dashed;	padding:10px;	background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0;	background-size:50% 50%;}

ログイン後にコピー

値が cover の場合、背景画像がボックス全体を埋めるように拡大されます。

div{	width: 300px;	height: 200px;	border:10px dashed;	padding:10px;	background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll 0 0;	background-size:cover;}

ログイン後にコピー

値が contains の場合、幅または高さがボックスに触れるまで、背景画像が比例して拡大されます。

多背景属性

　　在css3之前，每个容器只能指定一张背景图片，因此每当需要增加一张背景图片时，必须增加一个容器来容纳它。早期使用嵌套div容器显示特定背景的做法不是很复杂，但是它明显难以管理。它让html标记更加复杂，同时也会增加页面文件大小。如果要增加某个图片效果，不仅需要修改css还需要修改html代码。
　　通过css3的多背景属性，html标记就不需要任何修改，在css的background-image或则background属性中列出需要使用的所有背景图片，用逗号隔开。而且每张图片都具有background中的属性，例如可以重复，改变大小等。

background:[background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin] ,*

ログイン後にコピー

　　也可以把缩写拆为以下形式。

background-image:url1,url2,...,urlN;background-repeat:repeat1,repeat2,...,repeatN;background-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;

ログイン後にコピー

　　除了backgroun-color之外，其他的属性都可以设置多个属性值，不过前提是元素有多个背景图片存在。多个属性值之间必须使用逗号隔开。

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style>	div{		width: 300px;		height: 200px;		border:10px dashed;		padding:10px;		background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB2t7IWdFXXXXaqXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll left top / 50% 50%,			   url(https://img.alicdn.com/imgextra/i4/2406102577/TB2HT.RdFXXXXclXpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll right top / 50% 50%,			   url(https://img.alicdn.com/imgextra/i4/2406102577/TB2TxlhdVXXXXXxXXXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll right bottom / 50% 50%,			   url(https://img.alicdn.com/imgextra/i3/2406102577/TB2orQSdFXXXXb_XpXXXXXXXXXX_!!2406102577.jpg) no-repeat scroll left bottom / 50% 50%;		background-color:#ff0000;	}</style></head><body>	<div></div></body></html>

ログイン後にコピー

　　background-color属性只能有一个，切记，切记。

　　css3背景完。