CSS での背景の使用法の簡単な分析
Jul 28, 2018 am 11:05 AMこの記事の内容は、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等)、百分比、关键字(
left
,center
,right
,top
,bottom
)若只输入一个值,则代表 X 轴的值,Y 轴变成
center
值可以混搭,如
background-position:9px top;
额外属性
背景滚动 background-attachment
値は色の値または transparent
2 つのうち 1 つを選択します。デフォルト値は transparent
(透明) です。
カラー値は、16 進数のカラー コードまたは RGB カラー値、または英語コードにすることができます。英語のコードを使用することはお勧めできません。ブラウザーが異なれば、カラーコードの効果も異なる場合があります。
-
フォールバックとして背景色を設定することも重要です。背景色はどこでもサポートされていますが、背景のグラデーションなどのより珍しい機能は新しいブラウザーでのみサポートされており、さらに、何らかの理由で背景画像が読み込まれない場合があります。したがって、基本的な背景色を設定し、これらのプロパティを指定して、要素の内容が何があっても読み取れるようにすることをお勧めします。
no-repeat 垂直方向と水平方向の両方で繰り返します🎜 🎜リピートx🎜 🎜 X 軸方向 (横) に繰り返します 🎜🎜🎜🎜repeat-y🎜🎜 Y 軸方向 (縦) に繰り返します 🎜🎜🎜🎜🎜 背景位置背景画像 背景の繰り返しbackground-image
表示する背景画像を指定し、 url()
を使用してパスを設定します。デフォルトの画像の繰り返し方法は、水平方向と垂直方向の両方で繰り返します。
background-repeat
背景画像の繰り返し方法を指定します。デフォルト値はrepeat
です (繰り返すまで繰り返します)。要素の背景全体が塗りつぶされます)値 background-position
🎜背景画像の位置を指定します 位置、原点は左上隅(0,0)です。 🎜- 🎜 X 軸と Y 軸を表す 2 つの値を入力することも、1 つの値のみを入力することもできます。 🎜
- 🎜長さの値 (px など)、相対値 (rem など)、パーセンテージ、キーワード (
left
、) を入力できます。 center
、right
、top
、bottom
)🎜 - 🎜 値を 1 つだけ入力すると、は X 軸の値を表し、Y 軸は
center
になります🎜 - 🎜 値は、
background-position:9px のように混合して一致させることができますtop;
🎜
background-attachment
🎜🎜 コンテンツがスクロールするときに背景がどのようにスクロールするかを指定します。 🎜🎜🎜🎜🎜値 🎜🎜説明 🎜🎜🎜🎜🎜🎜スクロール🎜🎜のデフォルト値。スクロールすると、ページのスクロールに合わせて背景画像も移動します。 🎜🎜🎜🎜修正🎜🎜 ページの残りの部分をスクロールしたときに背景画像が動かないように修正しました。 🎜🎜🎜🎜🎜関連する推奨事項: 🎜🎜🎜CSS での border-sizing 属性の使用🎜🎜🎜🎜
以上がCSS での背景の使用法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

人気の記事

人気の記事

ホットな記事タグ

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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

ホットトピック









