CSS 背景 简述 背景颜色 背景图片 背景平铺 背景方位 背景附着 背景复合写法 背景颜色半透明

  通过CSS背景属性,可以给页面元素添加背景样式。

  背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。

CSS 背景
简述
背景颜色
背景图片
背景平铺
背景方位
背景附着
背景复合写法
背景颜色半透明

背景颜色

  background-color可以设置背景颜色值。属性值为transparent代表是透明,也可以设置其他格式的颜色。

CSS 背景
简述
背景颜色
背景图片
背景平铺
背景方位
背景附着
背景复合写法
背景颜色半透明

背景图片

  background-image用于设置背景图片,优点是便于控制图片位置。实际开发中常见于logo和一些超大图片的使用。

CSS 背景
简述
背景颜色
背景图片
背景平铺
背景方位
背景附着
背景复合写法
背景颜色半透明

   none代表没有背景图片,注意有背景时记得把url()写上,例如:

CSS 背景
简述
背景颜色
背景图片
背景平铺
背景方位
背景附着
背景复合写法
背景颜色半透明

背景平铺

  如果我们的盒子比背景图片要大,则背景图片就会自动进行背景平铺。

CSS 背景
简述
背景颜色
背景图片
背景平铺
背景方位
背景附着
背景复合写法
背景颜色半透明

   background-repeat可以对背景平铺进行设置,有四个取值:repeat、no-repeat、repeat-x、repeat-y。

  分别是:背景平铺、背景不平铺、向x轴平铺、向y轴平铺。

CSS 背景
简述
背景颜色
背景图片
背景平铺
背景方位
背景附着
背景复合写法
背景颜色半透明

背景方位

  如果我们通过src插入图片,图片的位置是很难控制的。

  但如果通过background-image方式设置背景图片,图片的位置就可以很容易地控制。

  可以通过background-position值改变图片在盒子的位置

CSS 背景
简述
背景颜色
背景图片
背景平铺
背景方位
背景附着
背景复合写法
背景颜色半透明

   参数代表的是图片的x坐标和y坐标,可以使用方位名词和精确单位。

CSS 背景
简述
背景颜色
背景图片
背景平铺
背景方位
背景附着
背景复合写法
背景颜色半透明

  •如果参数是方位名词,则两个词前后顺序无关,比如left top和top left是一致的,如果只指定了一个方位名词,第二个值默认居中对齐。

  •如果是精确单位,那么第一个肯定是x坐标,第二个是y坐标,如果只指定了一个数值,另一个默认垂直居中。

  •参数也可以是混合单位,第一个值为x坐标,第二个是y坐标

CSS 背景
简述
背景颜色
背景图片
背景平铺
背景方位
背景附着
背景复合写法
背景颜色半透明

背景附着

  background-attachment设置背景图像是否固定或者随着页面其他部分滚动,background-attachment后期可以制作视差滚动的效果。

CSS 背景
简述
背景颜色
背景图片
背景平铺
背景方位
背景附着
背景复合写法
背景颜色半透明

  默认为scroll指滚动,fixed指固定。

背景复合写法

  和font属性一样,背景也提供连写的方式节约开发工作量。

  一般约定的顺序是:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

CSS 背景
简述
背景颜色
背景图片
背景平铺
背景方位
背景附着
背景复合写法
背景颜色半透明

背景颜色半透明

  通过rgba的设置可以达到背景颜色半透明的效果。

CSS 背景
简述
背景颜色
背景图片
背景平铺
背景方位
背景附着
背景复合写法
背景颜色半透明

  rgb就是红绿蓝,a对应就是alpha透明度的简写,取值范围在0~1之间。

  注意这里的透明指的是盒子背景的半透明,盒子里的内容不受影响。