目次
定義と使用法
基本属性: カラー、イメージ、位置、繰り返し
额外属性
背景滚动 background-attachment 値は色の値または transparent 2 つのうち 1 つを選択します。デフォルト値は transparent (透明) です。
ホームページ ウェブフロントエンド CSSチュートリアル CSS での背景の使用法の簡単な分析

CSS での背景の使用法の簡単な分析

Jul 28, 2018 am 11:05 AM
background css

この記事の内容は、CSS における背景の使用法についての簡単な分析に関するもので、困っている友人に役立つことを願っています。

定義と使用法

基本属性: カラー、イメージ、位置、繰り返し

背景色 background-color

background-color

值为颜色值或transparent二者选其一,默认值是transparent(透明)。

  • 颜色值可以为16进制颜色码或者RGB颜色值,也可以是英文代码。不建议使用英文代码,不同浏览器对不同颜色代码处理的效果有可能不同。

  • 设置背景颜色作为后备也是很重要的。背景颜色在各处都得到了支持,而背景梯度等更奇异的特性只在较新的浏览器中得到支持,加上背景图像可能由于某种原因无法加载。因此,设置基本的背景颜色和指定这些特性是一个好主意,因此无论如何,元素的内容都是可读的。

背景图像 background-image

指定显示的背景图片,用url()设置路径。

  • 默认的图片重复方式为水平垂直皆重复。

背景重复 background-repeat

指定背景图像如何重复的,默认值是repeat(一直重复,直到整个元素的背景被填充)

描述
no-repeat 不重复
repeat 垂直和水平都重复
repeat-x X轴方向(水平)重复
repeat-y Y轴方向(垂直)重复

背景位置 background-position

指定定位背景图片的位置,原点为左上角(0,0)。

  • 可输入两个值代表 X 轴和 Y 轴,也可以只输入一个值。

  • 可输入长度值(px等)、相对值(rem等)、百分比、关键字(leftcenterright,topbottom

  • 若只输入一个值,则代表 X 轴的值,Y 轴变成center

  • 值可以混搭,如background-position:9px top;

额外属性

背景滚动 background-attachment 値は色の値または transparent 2 つのうち 1 つを選択します。デフォルト値は transparent (透明) です。

  • カラー値は、16 進数のカラー コードまたは RGB カラー値、または英語コードにすることができます。英語のコードを使用することはお勧めできません。ブラウザーが異なれば、カラーコードの効果も異なる場合があります。

  • フォールバックとして背景色を設定することも重要です。背景色はどこでもサポートされていますが、背景のグラデーションなどのより珍しい機能は新しいブラウザーでのみサポートされており、さらに、何らかの理由で背景画像が読み込まれない場合があります。したがって、基本的な背景色を設定し、これらのプロパティを指定して、要素の内容が何があっても読み取れるようにすることをお勧めします。 背景画像 background-image
    背景の繰り返し background-repeat 背景画像の繰り返し方法を指定します。デフォルト値は repeat です (繰り返すまで繰り返します)。要素の背景全体が塗りつぶされます) 説明 no-repeat
    表示する背景画像を指定し、url() を使用してパスを設定します。 デフォルトの画像の繰り返し方法は、水平方向と垂直方向の両方で繰り返します。
    no-repeat

    repeat

    垂直方向と水平方向の両方で繰り返します
    🎜 🎜リピートx🎜 🎜 X 軸方向 (横) に繰り返します 🎜🎜🎜🎜repeat-y🎜🎜 Y 軸方向 (縦) に繰り返します 🎜🎜🎜🎜🎜 背景位置 background-position🎜背景画像の位置を指定します 位置、原点は左上隅(0,0)です。 🎜
    • 🎜 X 軸と Y 軸を表す 2 つの値を入力することも、1 つの値のみを入力することもできます。 🎜
    • 🎜長さの値 (px など)、相対値 (rem など)、パーセンテージ、キーワード (left) を入力できます。 centerrighttopbottom)🎜
    • 🎜 値を 1 つだけ入力すると、は X 軸の値を表し、Y 軸は center になります🎜
    • 🎜 値は、background-position:9px のように混合して一致させることができますtop;🎜
    🎜追加属性🎜 🎜背景スクロール background-attachment🎜🎜 コンテンツがスクロールするときに背景がどのようにスクロールするかを指定します。 🎜🎜🎜🎜🎜値 🎜🎜説明 🎜🎜🎜🎜🎜🎜スクロール🎜🎜のデフォルト値。スクロールすると、ページのスクロールに合わせて背景画像も移動します。 🎜🎜🎜🎜修正🎜🎜 ページの残りの部分をスクロールしたときに背景画像が動かないように修正しました。 🎜🎜🎜🎜🎜関連する推奨事項: 🎜🎜🎜CSS での border-sizing 属性の使用🎜🎜🎜🎜

以上がCSS での背景の使用法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Vue におけるプレースホルダーの意味 Vue におけるプレースホルダーの意味 May 07, 2024 am 09:57 AM

Vue におけるプレースホルダーの意味

vueでスペースを書く方法 vueでスペースを書く方法 Apr 30, 2024 am 05:42 AM

vueでスペースを書く方法

vueでdomを取得する方法 vueでdomを取得する方法 Apr 30, 2024 am 05:36 AM

vueでdomを取得する方法

jsでのスパンの意味は何ですか jsでのスパンの意味は何ですか May 06, 2024 am 11:42 AM

jsでのスパンの意味は何ですか

jsでレムは何を意味しますか jsでレムは何を意味しますか May 06, 2024 am 11:30 AM

jsでレムは何を意味しますか

vueに画像を導入する方法 vueに画像を導入する方法 May 02, 2024 pm 10:48 PM

vueに画像を導入する方法

スパンタグの機能とは何ですか スパンタグの機能とは何ですか Apr 30, 2024 pm 01:54 PM

スパンタグの機能とは何ですか

ブラウザのプラグインは何語で書かれていますか? ブラウザのプラグインは何語で書かれていますか? May 08, 2024 pm 09:36 PM

ブラウザのプラグインは何語で書かれていますか?

See all articles