关于如何创建图像的简短教程。 发布时间：2021-01-07
我总是钦佩那些在CSS中创建单一Div插图的人。一个Div，多个背景层，大量的CSS代码，然后一切就完成了。在这里，你有一个插图。我一直认为这一定很具有挑战性，我永远也做不出这样的事情。现在发现我错了。
要创建一个简单的图像，您只需要知道一件事：CSS 中的背景是如何工作的。就是这样。真！您不必使用 CSS 变量。它们有助于维护干净的代码。读取带有变量的图像要容易得多，但这不是必需的。
练习 1 - 最简单的插图
让我们从一些简单的事情开始。如果你理解了这个例子，你就可以开始了。💪
好吧，看看我们这里有什么？100x100px 矩形，线性渐变以相同的颜色开始和结束。我们的第一个背景也定义 background-position: 0px 0px; 了 - 在 X 轴上，在 Y 轴上 0px。这意味着我们的背景从左上角开始......然后我们有 background-size: 100px 100px; 它清楚地定义了我们紫色的大小。最后一个 background-repeat: no-repeat; 是防止重复我们的图层。
结论：
- 我们的 div 是纯色 #9B59B6 因为我们以相同的颜色开始和结束渐变
- 大小是100*100px
太好了，让我们继续再添加一层。
就是这样！我们有两个线性梯度层。注意顺序！前面图层位于后面的图层之上。把它想象成一个 z-index .
我不喜欢将属性分解成碎片，所以让我们整理一下。
div {
width: 100px;
height: 100px;
background:
linear-gradient(#fff, #fff) 35px 35px / 30px 30px,
linear-gradient(#9B59B6, #9B59B6) 0px 0px / 100px 100px;
background-repeat: no-repeat;
}
斜杠用来分隔背景位置值和背景大小值。
如果我们有更多的背景层，事情可能会有点混乱。您可能不记得背景的第 31 行是用于窗户还是用于栅栏。😄
div {
--white-square: linear-gradient(#fff, #fff) 35px 35px / 30px 30px;
--purple-square: linear-gradient(#9B59B6, #9B59B6) 0px 0px / 100px 100px;
width: 100px;
height: 100px;
background:
var(--white-square),
var(--purple-square);
background-repeat: no-repeat;
}
这样更干净！
练习 2 - 小房子
您已经有足够的知识来创建插图。为了在最后的练习之前热身，让我们做一个小房子。
我们需要几层：
- 房子前面
- 门
- 车顶左侧
- 车顶右侧部分
- 窗口一和窗口二
三角形
这所房子最具挑战性的部分是创建三角形。让我们将这段代码拆分为几段。
让我们来研究这个例子： 我们的目标是为我们的屋顶创造一个三角形。目前，我们的梯度角度为 0 度，因此让我们更改它。我想要一个小的屋顶坡度，所以我把它改成了12度。
我想你明白了，你知道你现在应该做什么。😉 让我们减小梯度的百分比。我把它改成 19 度，以便在右侧有一个完美的起点。 最后，我们需要用透明背景替换红色背景。 在这里，我们有一个直角的漂亮屋顶。🚀
房子的复杂例子
我喜欢把自己扔进深渊。这就是为什么我创建了详细的房子作为我的第一个单div图像：
这看起来像一个复杂的例子。但是，如果您能实现前面一个例子，您将能够制作与上述相同的内容。我在文章中的样本和本文中的唯一区别是单位。在这里，我使用“vmin”单元来创建响应式图像。
这就是今天的全部内容。感谢您的阅读！
