この記事の内容は、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 カラー値、または英語コードにすることができます。英語のコードを使用することはお勧めできません。ブラウザーが異なれば、カラーコードの効果も異なる場合があります。
表示する背景画像を指定し、url() を使用してパスを設定します。 |
デフォルトの画像の繰り返し方法は、水平方向と垂直方向の両方で繰り返します。 |
---|---|
値 | |
background-position
🎜背景画像の位置を指定します 位置、原点は左上隅(0,0)です。 🎜left
、) を入力できます。 center
、right
、top
、bottom
)🎜center
になります🎜background-position:9px のように混合して一致させることができますtop;
🎜background-attachment
🎜🎜 コンテンツがスクロールするときに背景がどのようにスクロールするかを指定します。 🎜🎜🎜🎜🎜値 🎜🎜説明 🎜🎜🎜🎜🎜🎜スクロール🎜🎜のデフォルト値。スクロールすると、ページのスクロールに合わせて背景画像も移動します。 🎜🎜🎜🎜修正🎜🎜 ページの残りの部分をスクロールしたときに背景画像が動かないように修正しました。 🎜🎜🎜🎜🎜関連する推奨事項: 🎜🎜🎜CSS での border-sizing 属性の使用🎜🎜🎜🎜以上がCSS での背景の使用法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。