背景属性-background

背景属性作用

背景属性的作用是设置元素的背景颜色图像等

背景颜色

• 便签：background-color

• 取值：

  • 常见颜色单词表示方式
  • rgb（value value value ）三原色表示方式，value的值是0-255
    -十六禁止表示方式

背景图片

• 标签：background-image
• 背景图片的默认值是none，表示没有背景图片
• 设置背景图片background-image:url('.///')

背景重复

• 标签：background-repeat
• 取值：

  • repeat，表示图片重复，水平方向和垂直方向上都重复使用改背景图片

  • repeat-x，表示背景图片只在x轴上重复

  • repeat-y表示图片只在y轴上重复

  • no-repeat表示仅仅显示一次，不重复

背景尺寸

• 背景尺寸设置了背景图片的大小，属性值有宽度和高度两个属性值；值的使用方式可以是正常的单位像素px，磅pt，em,rem等属性单位，也可以是百分比单位
• 背景尺寸不仅可以直接设置单位尺寸，还有固定名词选项
  • cover表示将背景图片放大至足够大可以覆盖整个背景视窗，图片的某些区域或许无法显示，不建议使用
  • contain表示将图像扩大至最大尺寸使其宽度和高度完全适用内容区域

图片的固定

• 默认情况下背景图片会随着页面的滚动而滚动
• 通过background-attachment属性可以设置背景图片固定位置还是随着页面滚动
  • 默认值scroll。表示随着页面滚动
  • 可取值fixed表示背景图像固定，不随页面滚动

背景定位属性

背景定位属性是用来改变背景图片在背景中的位置的属性

• 该属性的取值
  • 百分比取值，第一个取值是表示x轴的取值，第二个取值表示的是y轴的取值
  • 正常数值加单位取值，第一个是x轴的取值，第二个是y轴的取值
  • 特殊字符单词取值
    • left表示在页面背景的左边显示
    • right表示在页面背景的右边显示
    • center表示在页面背景的中间显示
    • top表示在页面背景的上部显示
    • bottom表示在页面背景的下部显示
      注意：背景显示定位使用单词使用单词法表示的时候，可以连续使用多个单词组合表示，但是不要冲突

背景属性

背景属性标签是background，该属性可以设置所有与背景有关的属性

• 属性使用放肆：backgrond:coloe url(图片) repeat attachment position;

  • 顺序是，颜色，背景图片，图片重复方式，背景图片固定方式，背景图片定位方式

• 如果其中的某个值不设置的化，使用默认设置