Question

我从here采取了一个非常受欢迎的例子。我想了解这些模式是如何从渐变属性生成的。我刚刚采取并编写了几个例子。需要了解如何在渐变属性中传递事物，以便我可以生成自己的模式。

＆＃13;

.pattern {
  height: 100px
}

.pattern1 {
  background: radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px) 0px 10px, radial-gradient(at 100% 100%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px), #8a3;
  background-size: 20px 20px;
}

.pattern2 {
  background: linear-gradient(63deg, #999 23%, transparent 23%) 7px 0, linear-gradient(63deg, transparent 74%, #999 78%), linear-gradient(63deg, transparent 34%, #999 38%, #999 58%, transparent 62%), #444;
  background-size: 16px 48px;
}

.pattern3 {
  background: radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187, 0, 51, 0) 27%), radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187, 0, 51, 0) 27%), radial-gradient(circle closest-side at 40% 22%, #d35 45%, rgba(221, 51, 85, 0) 46%), radial-gradient(circle closest-side at 60% 22%, #d35 45%, rgba(221, 51, 85, 0) 46%), radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221, 51, 85, 0) 31%), radial-gradient(circle closest-side at 60% 43%, #b03 26%, rgba(187, 0, 51, 0) 27%) 50px 50px, radial-gradient(circle closest-side at 40% 43%, #b03 26%, rgba(187, 0, 51, 0) 27%) 50px 50px, radial-gradient(circle closest-side at 40% 22%, #d35 45%, rgba(221, 51, 85, 0) 46%) 50px 50px, radial-gradient(circle closest-side at 60% 22%, #d35 45%, rgba(221, 51, 85, 0) 46%) 50px 50px, radial-gradient(circle closest-side at 50% 35%, #d35 30%, rgba(221, 51, 85, 0) 31%) 50px 50px;
  background-color: #b03;
  background-size: 100px 100px;
}

.pattern4 {
  background: linear-gradient(135deg, #ECEDDC 25%, transparent 25%) -50px 0, linear-gradient(225deg, #ECEDDC 25%, transparent 25%) -50px 0, linear-gradient(315deg, #ECEDDC 25%, transparent 25%), linear-gradient(45deg, #ECEDDC 25%, transparent 25%);
  background-size: 100px 100px;
  background-color: #EC173A;
}

＆＃13;

<div class="pattern1 pattern"></div>
<div class="pattern2 pattern"></div>
<div class="pattern3 pattern"></div>
<div class="pattern4 pattern"></div>

＆＃13;

Answer 1

如果你想了解每个模式是如何构建的，你应该通过使它变大来解构它（在下面的例子中是4x）并用一个独特且更加可见的颜色替换每种颜色。

下面，对于第二个模式，我在行尾用透明替换了背景颜色＃444（番茄不那么清晰）并用蓝色，红色等随机颜色替换#999的每个出现。等。
编辑：并在每个逗号后添加一个新行。每行一个* -gradient显示其中有3个和背景颜色。

.pattern {
  height: 192px;
}

.pattern2 {
  background: linear-gradient(63deg, red 23%, transparent 23%) 7px 0,
              linear-gradient(63deg, transparent 74%, blue 78%),
              linear-gradient(63deg, transparent 34%, darkgreen 38%, #999 58%, transparent 62%),
              transparent;
  background-size: 64px 192px;
}

<div class="pattern2 pattern"></div>

高级Css3属性背景渐变。它是如何工作的？

1 个答案: