关于前端:纯CSS-格子背景

56次阅读

共计 1663 个字符,预计需要花费 5 分钟才能阅读完成。

本文简介

点赞 + 珍藏 + 关注 = 学会了

这次会应用 css 画出一个格子背景。并且一步步剖析如何实现~

思路

间接给答案:通过 2 个相等的直角三角形拼接,造成一个正方形。

三角形能够应用 background-image 的突变来实现。

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
}
body {background-image: linear-gradient(45deg, #000 25%, transparent 0);
}

此时进去的成果如上图所示。

做一个 45 度的线性突变,第一个色彩是 #000(彩色),占整个背景贴片的 25%,其余部分都是红色。

在下面的根底上,用 background-size 来管制背景贴片的大小。

body {background-image: linear-gradient(45deg, #000 25%, transparent 0);
  background-size: 200px 200px;
}

开始有点想法了吗?

此时如果咱们再画多一个反过来的彩色的直角三角形,拼在一起不就成了正方形了吗?

反过来的三角形怎么画呢?我尝试将彩色从 25% 改成 75%,会失去以下成果

body {background-image: linear-gradient(45deg, #000 75%, transparent 0);
  background-size: 200px 200px;
}

能够看到红色的三角形就是本来彩色三角形反过来的样子。

把上图的“红色三角形”变成彩色,本来的彩色三角形(25%)持续保留。

于是我又加多层突变~

body {
  background-image:
    linear-gradient(45deg, #000 25%, transparent 0),
    linear-gradient(45deg, transparent 75%, #000 0);
  background-size: 200px 200px;
}

简化一下代码:

body {background-image: linear-gradient(45deg, #000 25%, transparent 0, transparent 75%, #000 0);
  background-size: 200px 200px;   
}

最初再做多一层下面的成果,而后挪动一下其中一层的地位,就能够合并成一个彩色正方形。

body {
  background-image:
    linear-gradient(45deg, #000 25%, transparent 0, transparent 75%, #000 0),
    linear-gradient(45deg, #000 25%, transparent 0, transparent 75%, #000 0);
  background-position: 0 0, 100px 100px;
  background-size: 200px 200px;
}

功败垂成。

最初须要揭示的是,在本例中 background-position 第二个突变的位移是 background-size 的一半,这样就能实现这种格子背景了~

残缺代码

<style>
  html,
  body {
    margin: 0;
    width: 100%;
    height: 100%;
  }

  body {
    background-image:
      linear-gradient(45deg, #000 25%, transparent 0, transparent 75%, #000 0),
      linear-gradient(45deg, #000 25%, transparent 0, transparent 75%, #000 0);
    background-position: 0 0, 100px 100px;
    background-size: 200px 200px;
  }
</style>

这是做成背景的残缺代码。

举荐浏览

👍《CSS 里的 ch 到底是什么货色?》

👍《给 console 来的款式》

👍《如何用 CSS 选择符杀死队友》

👍《这 18 个网站能让你的页面背景炫酷起来》

👍《纯 CSS:动静突变背景【一分钟学会】》

👍《纯 css 实现 117 个 Loading 成果》

点赞 + 关注 + 珍藏 = 学会了

正文完
 0