ホームページ  >  記事  >  ウェブフロントエンド  >  CSS3 チュートリアルの背景

CSS3 チュートリアルの背景

黄舟
黄舟オリジナル
2016-12-27 15:56:521308ブラウズ

フロントエンド開発プログラマーの皆さん、CSS3 チュートリアルに関する知識を毎日皆さんに説明できるのはとてもうれしいことです。CSS3 には、背景をより強力に制御できる複数の新しい背景属性が含まれています。

この記事では、次の 2 つの背景属性について学習します:

1、background-size、

2、background-origin。

複数の背景画像の使用方法も学びます。

ブラウザのサポート

CSS3 チュートリアルの背景

まず CSS3 の背景サイズ属性を理解しましょう:

CSS3 チュートリアルの背景

背景サイズ属性は、背景画像のサイズを指定します。

CSS3 より前は、背景画像のサイズは画像の実際のサイズによって決まりました。 CSS3では背景画像のサイズを指定できるため、さまざまな環境で背景画像を再利用することができます。

サイズはピクセルまたはパーセンテージで指定できます。寸法がパーセンテージとして指定されている場合、寸法は親要素の幅と高さを基準とします。

例 1:

背景画像のサイズを調整する:

div
{
background:url(bg_flower.gif);
-moz-background-size:63px 100px; /* 老版本的 Firefox */
background-size:63px 100px;
background-repeat:no-repeat;
}

例 2:

コンテンツ領域を満たすように背景画像を引き伸ばす:

div
{
background:url(bg_flower.gif);
-moz-background-size:40% 100%; /* 老版本的 Firefox */
background-size:40% 100%;
background-repeat:no-repeat;
}

CSS3 の background-origin 属性を見てみましょう:

background -origin 属性は、背景画像の配置領域を指定します。

背景画像は、コンテンツボックス、パディングボックス、またはボーダーボックス領域に配置できます。

CSS3 チュートリアルの背景

例:

コンテンツボックス内の背景画像の配置:

div
{
background:url(bg_flower.gif);
background-repeat:no-repeat;
background-size:100% 100%;
-webkit-background-origin:content-box; /* Safari */
background-origin:content-box;
}

CSS3 複数の背景画像:

CSS3 チュートリアルの背景

CSS3 では、要素に複数の背景画像を使用できます。

例:

body 要素に 2 つの背景画像を設定します:

body
{
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}

新しい背景属性:


CSS3 チュートリアルの背景

上記は CSS3 チュートリアルの内容です - 背景 詳細については、注意してください。 PHP 中国語 Web サイト (www.php.cn)!


声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。