Css按钮渐变背景位置

Question

我使用了带有背景效果的按钮。但是，我不明白背景位置是如何工作的。

背景位置设置为右侧，然后当我将鼠标悬停在按钮上时，背景会向左移动。但是，我不明白为什么 "blue" 似乎是从左到右，就像背景向右移动一样。

背景不应该向左移动吗？

button {
  color: white;
  background: linear-gradient(to left, red 50%, blue 50%);
  background-size: 200%;
  background-position: right bottom;
  border: none;
  border-radius: unset;
  width: 85px;
  height: 35px;
  transition: 2s ease;
  cursor: pointer;
}

button:hover {
  background-position: left bottom;
}

<button>Button</button>

Fiddle Link

Answer 1

从您的按钮中删除 background-position 或更改顺序 backgrond-position:left bottom 并在您的渐变和悬停位置应用 right 而不是 left ，如下所示。

button
{
color:white;
background: linear-gradient(to right, red 50%, blue 50%);
background-size: 200%;
border: none;
border-radius: unset;
width: 85px;
height: 35px;
transition: 2s ease;
cursor: pointer;
}
button:hover
{
background-position:right bottom;
}

我在以下代码段中添加了同样的内容。

button
{
 color:white;
 background: linear-gradient(to right, red 50%, blue 50%);
 background-size: 200%;
 border: none;
    border-radius: unset;
    width: 85px;
    height: 35px;
 transition: 2s ease;
 cursor: pointer;
}
button:hover
{
 background-position:right bottom;
}

<button>
Button
</button>

Answer 2

逻辑很简单，让我们从每个属性开始。

首先你像这样定义渐变 linear-gradient(to left, red 50%, blue 50%) 这意味着从 左边开始 我们将有 50% 的红色然后剩下的蓝色（也有 50%）

div {
  height:50px;
  width:100px;
  background-image:linear-gradient(to left, red 50%, blue 50%)
}

<div>
</div>

现在您将 background-size 指定为 200%，这意味着您将背景的大小缩放 2。为了说明，请查看以下代码以查看初始背景和缩放后的背景：

div {
  height:50px;
  width:100px;
  background-image:linear-gradient(to left, red 50%, blue 50%)
}
div:nth-child(2) {
  height:100px;
  width:200px;
  margin-top:20px;
}

<div>
</div>
<div>
</div>

但是背景应该始终适合元素的大小，在这种情况下，您只会看到它的 1/4（因为我们在两个方向上都进行了缩放）。 background-position 将对此做出决定。当您将它设置为右下角时，您使背景的右下角与元素的右下角匹配，如下所示：

所以你最初会看到黄色部分。如果您指定左下角，您将拥有：

所以就像黄色框从从右向左滑动 或者黄色框是固定的，背景从左向右移动（这是您看到的行为，因为这里的黄色框是您的按钮）。

此移动的主要原因是溢出，因此要更改其位置，背景应朝相反的方向移动，这与 background-size 小于 100 的情况不同%。如果背景大小为 100%，您将看不到任何移动，因为两个位置相同！

这是一个包含 3 种不同情况的工作示例：

div {
  height:50px;
  width:100px;
  background-image:linear-gradient(to left, red 50%, blue 50%);
  border:1px solid;
  background-position:right bottom;
  background-repeat:no-repeat;
  transition:1s;
}
.d1 {
  background-size:50%;
}
.d2 {
  background-size:100%;
}
.d3 {
  background-size:200%;
}

body:hover div{
  background-position:left bottom;
}

I will move from right to left
<div class="d1">
</div>
I will not move !
<div class="d2">
</div>
I will move from left to right
<div class="d3">
</div>

Css按钮渐变背景位置

Css button gradient background position

html

css

linear-gradients

background-position