WebページにCSSの背景画像と背景色を設定する方法

零下一度
リリース: 2017-06-06 11:45:19
オリジナル
6720 人が閲覧しました

ここでの CSS 背景とは、Web ページ上の CSS を通じてさまざまな背景スタイルを設定するなど、CSS を通じてオブジェクトに背景属性を設定することを指します。

CSS背景背景機能: 単色の背景を設定します。背景の背景は、オブジェクトの背景色を単色に設定し、画像を背景として設定できます。背景が写真の場合は、その写真を横方向に繰り返し並べたり、オブジェクトの任意の位置に写真を背景として固定したりすることができます。

1. CSSの背景に関する常識

ラベルの背景色の設定方法
CSSには背景色を設定するために特別に使用されるbackground-color:属性があります
値:
特定の単語
rgb
rgba

Hex

2. css 背景画像は画面サイズに応じて自動的に拡大縮小します

WebページにCSSの背景画像と背景色を設定する方法

上記は、画面サイズに応じて自動的に拡大縮小する CSS 背景画像です。この記事では、数行の短い行を使用しています。これを作成するためのコードの説明です。効果は想像ほど複雑ではありません。興味のある方はクリックしてご覧ください

3. CSS の背景に関連するプロパティの詳細な紹介

印象では、CSS は背景のみですが、背景は複合プロパティです

含まれます:

background-color: 背景色、CSS でサポートされている色の表現方法、すべて使用できます

background-image: 背景画像 (URL)

background-repeat: 背景が繰り返されるかどうか (repeat、no-repeat、repeat-x、repeat-y)

background-position: 背景の位置 (キーワード、パーセント、ピクセル)

background-size: 背景のサイズ

background -origin: 背景の配置領域

background-clip: 背景描画領域

background-attachment: 背景画像を固定するか、ページの残りの部分と一緒にスクロールするかを指定します

4. CSSの使い方の詳細説明背景画像の座標配置と負の数のテクニック

WebページにCSSの背景画像と背景色を設定する方法 レイアウトプロセス中の CSS 背景画像の配置 この記事では、背景画像の配置に関する知識とその理由を詳しく紹介します。負の数値もありますので、興味のある方は

5 を参照してください。

CSS 背景固定スタイルの背景 -attachment 属性の基本入門

CSS では、背景添付ファイルのbackground-attachment 属性を使用して、背景画像をスクロールするかどうかを設定できます。物体と一緒に、または固定されたままになります。

文法:

background-attachment:scroll/fixed;
ログイン後にコピー

6.

あなたの知らないCSS背景—CSS背景プロパティの完全な説明

WebページにCSSの背景画像と背景色を設定する方法CSS背景は、Webデザインで非常に頻繁に使用されますが、開発者にとっては馴染みのあるCSSプロパティです。この記事では、この未知のベールを剥がすことを試みます。

7.

DIV+CSS 背景全体の画像 (CSS スプライト)

ウェブサイト全体の背景画像が同じ画像であることをよく見かけました。小さなアイコンがたくさんあります。

海外で非常に人気のあるCSSスプライトでもあり、現在、中国ではこの方法で使用しているWebサイトがたくさんあります。

今回CSS+DIVを書くときも、Webサイト全体は遅いですが、

div+cssの背景のリソースはかなり節約できると感じました。グラデーションカラーコードの例

CSS を使用して、IE や Chrome などのブラウザに適した DIV 背景色のグラデーションを作成します。

関連する質問と回答:

1. css3 - CSS 背景画像の高さを 100% にし、幅の比率を維持するにはどうすればよいですか?

2 背景シリーズの背景を詳しく解説

2. Cssはbackground-position属性を使ってスプライト画像のコードを完成させます

以上がWebページにCSSの背景画像と背景色を設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!