今日文章目录
> - 视差背景
> - 事前准备
> - CSS 说明
> - 参考资料

视差背景

• 这次的练习是依据 CSScoke 金鱼都能懂的CSS必学属性系列 第 21 篇
  (CSScoke前辈讲的很详细，可以直接点击连结去看，才能学到东西)
  .
  .
  .
  .
  .
  .
  .
  .
  .
  .
  .
  .
  .
  .
  .
  .
  .
  .
  .
  .
  .
  .
  欸怎麽还在？还不去看！

事前准备

• HTML 结构：

    <div class="section topic1">A</div>
    <div class="section topic2">B</div>
    <div class="section topic3">Next Step?</div>
    <div class="section topic4">C</div>
    <div class="section topic5">What are you waiting for?</div>
    <div class="section topic6">E</div>
  

CSS 说明

• 100vw 100vh: vw视窗宽，vh视窗高。100vw代表100%视窗宽，100vh代表100%视窗高。

• line-height: 100vh : 文字行高同视窗高。(这里因为只有一行字，用来创造垂直置中的效果。如果多行显示，一行字就占满整个视窗高，要看下一行就要往下拉罗！)

• background : 完整参数设定依序为

  • background-color
  • background-image
  • background-scroll
  • background-repeat
  • background-position
  • background-size

  详解请去看 CSScoke 金鱼都能懂的CSS必学属性系列 第 22 篇

• codepen 完整练习：https://codepen.io/chen-chens/pen/JjJRWmb

参考资料

CSScoke 金鱼都能懂的CSS必学属性系列 第 21 篇

今天很废，生不出东西...程序的世界很大，我很想加入，必须多练！
这次来参加铁人赛，有两个目的：

• 不管写多烂，30天都要写好写满!
• 看看自己学的到底有没有吸收进去，问题在哪里，过程会告诉我答案。(嗯...RWD这样母汤)
  

在茫然大海载浮载沈的朋友们，一起加油吧！

明日预告：三角形