CSS3チュートリアル(5)：Webページ背景画像_css3_CSS_Webページ制作

Web ページ制作に関する Webjx 記事の紹介: 背景画像/テクスチャはさまざまな方法で使用でき、Web サイトの最終的な美しさを最大限に高めるためによく使用されます。 CSS3 ではこれが真剣に考慮されているため、複数の背景画像と背景画像サイズを適用して、より完璧な効果を実現できます。 背景画像/テクスチャはさまざまな方法で使用でき、Web サイトに最高の最終美化を追加するためによく使用されます

背景画像/テクスチャはさまざまな方法で使用でき、Web サイトに最高の最終美化を追加するためによく使用されます。ウェブサイト。 CSS3 ではこれが真剣に考慮されているため、複数の背景画像と背景画像サイズを適用して、より完璧な効果を実現できます。
背景画像/テクスチャはさまざまな方法で使用でき、Web サイトに最高の最終美化を追加するためによく使用されます。 CSS3 ではこれが真剣に考慮されているため、複数の背景画像と背景画像サイズを適用して、より完璧な効果を実現できるようになりました。
前回の記事: CSS3チュートリアル(4): Webページの枠線とWebページの文字影
CSS3の背景画像サイズはbackground-size:Apx Bpx;
-Apx = x-axis (画像幅)
-Bpxと書くことができます。 = y 軸 (画像の高さ)
これを理解して、この機能を体験してみましょう:
CSS3 背景サイズをサポートする最適なブラウザは Safari と Opera なので、使用する必要があるのは -o と -webkit プレフィックスのみです。 背景サイズ

#backgroundSize{ border: 5px ソリッド #bd9ec4; 背景:url(image_1.extention) 右下 no-repeat; -o-background-size: 150px 250px; ; パディング: 15px 25px; 高さ: 継承; 幅: 590px; }

Firefox(3.05…)

Google Chrome(2.0.156…) (IE7, IE8 RC1)

Opera(9.6…)

Safari(3.2.1 windows…)

CSS3 で複数の背景画像を適用するには、それらを使用して分離します。例:

background: url(image_1 .extension) 右上の繰り返しなし、url(image_2.extention) 右下の繰り返しなし

#backgroundMultiple{ border: 5px 無地 #9e9aab) 左上の繰り返しなし、 url (image_2.extention) 左下繰り返しなし、url(image_3.extention) 右下なし; パディング: 15px 25px; 高さ: 継承; }
ブラウザサポート:

Firefox(3.05…)

Google Chrome(1.0.154…)

Google Chrome(2.0.156…)

Internet Explorer(IE7、IE8 RC1)

Opera(9.6…)

Safari(3.2.1 Windows…)

以上ですCSS3 チュートリアル (5): Web ページの背景画像_css3_CSS_Web ページ制作コンテンツの詳細については、PHP 中国語 Web サイト (www.php.cn) をご覧ください。