css background合写属性

1,425 阅读1分钟

background 简写属性在一个声明中设置所有的背景属性。可以设置如下属性:

  • background-color
  • background-position
  • background-size
  • background-repeat
  • background-origin
  • background-clip
  • background-attachment
  • background-image

学习的过程中一直有一些疑问不太明白,就整理一下

1.background-position可以有哪些值?
  1. 可以写left, right, top, bottom这样的关键词;
  2. 也可以写百分比值;
  3. 还可以写length, 也就是具体20px这样;

注:这些位置都是相对于左上角(0, 0)的位置。

2.这么多属性,要按什么顺序书写呢?

理论上,可以采用任何顺序书写(因为他们的值类型都是不一样的,所以可以区分,除了background-position和background-size,所以它们之间是用/区分的,如果只写一对值,会被认为是background-position),但有一个小小的限制:1、如果background-position有两个值,它们必须一起出现,必须按照水平在前垂直在后的顺序。 2、 background没有必不可少的值,只要至少出现一个值就可以,如background:red ; 其效果是把除了颜色的值都设置为默认 。