CSS背景

背景颜色

• background-color:<color>
  • background-color:transparent;

背景图片

• background-image:<bg-image>[,bg-image]*
  • background-image:url(),url();

是否平铺

• background-repeat:<repeat-style>[,<repeat-style>]*
• <repeat-style>=repeat-x|repeat-y|[repeat|space|round|no-repeat]{1,2}
  • 可写多个值

例:background-repeat:no-repeat repeat,repeat-x;

背景跟着内容走

• background-attachment:<attachment>[,<attachment>]*
  • <attachment> =scroll | fixed |local
  • scroll默认值
  • local背景图片跟内容一起滚动

改变背景位置

• background-position
  • 可写关键字top bottom left right center等
  • 也可以写百分比
  • 可写一个值,也可两个值 也可写四个值
  • 只有一个值,有一个没写的默认center

例

background-position:right;
background-position:50% 50%;
background-position:right 10px top 20px;

雪碧图应用:

background-image:url(sprite.png);
background-repeat:no-repeat
background-position:0-100px;

线性渐变

• linear-gradient()

径向渐变

• 后续再更新