Day26 - HTML 与 CSS (8) - 背景图片

背景图片

• background-image：使用 url(pic路径) 来显示图片
  • background-image: url(./img/logo.png);
  • 若图片尺寸大小 < 区块设定尺寸，预设会重复排列
• background-repeat：设定重复状况，透过重复减少图片载入
  • repeat：重复 x (水平)和 ｙ (垂直)
  • no-repeat：不重复
  • repeat-x：只重复 x (水平)
  • repeat-y：只重复 y (垂直)
• background-color：设定背景颜色，输入颜色如 red
• background-position：设定 background-image 图片位置，预设为水平与垂直皆置中 center
  • 设定 2 组：左右 left or right 与 上下 top or bottom 各1 个
  • 设定 1 组：未设定的那组为置中 center，因此若只有 left 代表靠左并且上下置中
  • 直接指定位置： 10px 或 30%
• background：可以综合上述的全部属性，写在一起，以空格隔开
  • background: url(./img/logo.png) no-repeat left top

补充资料与其他的用法，可以参考金鱼系列的 CSS 系列文

• 金鱼都能懂的CSS必学属性

• 图片的格式

  • jpg：无透明背景
  • gif：有透明背景，有动画效果，只有 256 色
  • png：有透明背景，若为 png8 为 256 色(2 的 8 次方)，pn24 为 2 的 24 次方种色彩

参考资料

• CSS background 背景
• Background-repeat- 金鱼都能懂的CSS必学属性
• Background-position- 金鱼都能懂的CSS必学属性
• Background - 金鱼都能懂的CSS必学属性

次回

图片的部分似乎比我预期的快，预计说明 head 的部分