Question

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

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

背景需要应用于span元素，而不是button。我设法做的是将背景应用于每个span - 但这不是我想要的效果。请看这个小提琴，以便更好地了解我想要实现的目标：

https://jsfiddle.net/spacyad6/

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

有一种聪明的方法吗？理想情况下，我宁愿不要有3个单独的渐变。该解决方案需要在Firefox，Chrome和＆amp; 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>

Answer 2

我用my solution更新了你的js小提琴。

我们的想法是使用span来显示颜色而不是隐藏颜色。

相关部分的变化：

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

#gradient {
  position : relative;
}

#gradient span {
  position: absolute;
  left: 0;
  width: 100%;
  height: calc((150px - 45px)/2);
  background-color : #f3f5f6;
}

#gradient span:nth-child(1) {
  top: 15px;
}

#gradient span:nth-child(2) {
  bottom: 15px;
}

对于此解决方案，您需要知道：

背景颜色hex
按钮的高度
您想要的跨度高度

对于正常使用，这不应该是一个问题。

下行：

需要如前所述的硬编码值
现在为这些假跨度制作边界半径或类似的东西祝你好运

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

2 个答案: