css背景设置

1、 背景颜色

• background-color:后面跟颜色属性

2、 背景图片

• background-image
  属性允许指定一个图片展示在背景中（只有CSS3才可以多背景）可以和 background-color 连用。 如果图片不重复的话，图片覆盖不到地地方都会被背景色填充。 如果有背景图片平铺，则会覆盖背景颜色。
• 参数
  • none：无背景（默认）
  • url：使用绝对或相对地址指定背景图像

3、 背景平铺

• 即所选背景图片是否填充整个样式区域
• 语法

  background-repeat : repeat | no-repeat | repeat-x | repeat-y 

• 参数
  • repeat : 　背景图像在纵向和横向上平铺（默认的）
  • no-repeat : 　背景图像不平铺
  • repeat-x/y : 　背景图像在横向/纵向上平铺

4、 背景位置

• 调整背景图片在区域内的样式
• 语法

  background-position : x坐标 y坐标

• 参数
  • 使用top bottom left right center定位，没有顺序

    background-position: top left;    // 左上角
    background-position: top;            //只写一个默认另一边居中

  • 直接写像素

    background-position: 12px 30px    // x，y轴顺序

5、 背景附着

• 设置背景是随内容滚动还是固定
• background-attachment
• 参数
  • scroll：滚动
  • fixed：固定

以上背景可以简写，类似padding或margn属性一样，按照顺序即可

background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置

6、背景透明(CSS3)

• CSS3支持背景半透明的写法语法格式是:
  • background: rgba(0,0,0,0.3);
    最后一个参数是alpha 透明度 取值范围 0~1之间
    注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不收影响。

转载于:https://www.cnblogs.com/kasi/p/10336583.html