多个元素背后的css渐变背景

Question

我有一个渐变背景，我想将其应用到汉堡菜单图标后面。

<button type="button" id="btn-menu">
  <span></span>
  <span></span>
  <span></span>
</button>

背景需要应用于 span 元素，而不是 button。我设法做的是将背景应用于每个 span - 但这不是我想要的效果。请参阅此 fiddle 以更好地了解我要实现的目标:

https://jsfiddle.net/spacyad6/

正如您将看到的，每个跨度看起来完全相同。需要做的是底部跨度应该几乎没有任何蓝色，中间跨度应该有更大的绿色区域，顶部跨度应该有更大的蓝色区域。

有没有聪明的方法来做到这一点？理想情况下，我不希望有 3 个单独的渐变。该解决方案需要在 Firefox、Chrome 和 Safari 中运行。

Answer 1

这是一种方法:

• 在通用#btn-menu span样式元素中定义背景
• 设置背景大小以匹配按钮大小
• 对于每个跨度，将 background-position-y 设置为适当的垂直偏移

在下面的代码片段中，我在渐变中显示了 3 种颜色，以使效果更加明显。 this jsfiddle 中显示了相同的示例.

#btn-menu {
  float: left;
  width: 150px;
  height: 150px;
  position: relative;
  background: none;
  border: none;
  z-index: 5000;
  position: relative;
}

#btn-menu span {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 15px;
  background-image: linear-gradient(45deg, red 20%, yellow 60%, blue 100%);
  background-size: 150px 150px;
}

#btn-menu span:nth-child(1) {
  top: 0;
  background-position-y: 0px;
}

#btn-menu span:nth-child(2) {
  top: 65px;
  background-position-y: -65px;
}

#btn-menu span:nth-child(3) {
  bottom: 0;
  background-position-y: -135px;
}

#gradient {
  float: left;
  margin-left: 50px;
  width: 150px;
  height: 150px;
  background-image: linear-gradient(45deg, red 20%, yellow 60%, blue 100%);
}

<button type="button" id="btn-menu">
  <span></span>
  <span></span>
  <span></span>
</button>

<div id="gradient"></div>