在线性梯度上使用背景位置的百分比值

Question

在线性梯度上使用背景位置的百分比值

有没有办法background-position取百分比值？当前，我的按钮只适用于width和background-position.

body {

  min-height: 100vh;

  display: flex;

  flex-direction: column;

  justify-content: space-around;

  align-items: center;

}

.button {

  display: flex;

  justify-content: center;

  align-items: center;

  text-decoration: none;

  color: white;

  font-weight: bold;

  width: 350px;

  height: 50px;

  border: 1px solid green;

  transition: background 0.5s;

  background-repeat: no-repeat;

  background-image: linear-gradient(to left, #2484c6, #1995c8 51%, #00bbce), linear-gradient(to right, #2484c6 0%, #1995c8 51%, #00bbce 76%);

}

.button-pixel {

  background-position: -350px 0px, 0px 0px;

}

.button-pixel:hover {

  background-position: 0px 0px, 350px 0px;

}

.button-percentage {

  background-position: -100% 0px, 0px 0px;

}

.button-percentage:hover {

  background-position: 0% 0px, 100% 0px;

}

<a href="#" class="button button-pixel">In Pixel</a>

<a href="#" class="button button-percentage">In Percentage</a>