Css按钮渐变背景位置[重复]答案

【问题标题】：Css button gradient background position [duplicate]Css按钮渐变背景位置[重复]
【发布时间】：2018-02-16 06:52:16
【问题描述】：

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

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

背景不应该向左移动吗？

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;
}

&lt;button&gt;Button&lt;/button&gt;

Fiddle Link

【问题讨论】：

你可以从左到右和从右到左反转来镜像它。
它会，如果background-size会小于100%，如果尺寸大于按钮的实际尺寸，它将在反向版本中工作
它在反向版本中工作的原因是什么？

标签： html css linear-gradients background-position

【解决方案1】：

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

首先你像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>

现在您将背景尺寸指定为 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 将对此作出决定。当您将其设置为右下角时，您会使背景的右下角与元素的右下角相匹配，如下所示：

所以您最初会看到黄色部分。如果你指定左下角，你会得到这个：

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

这种移动的主要原因是溢出，所以要改变它的位置，背景应该向相反的方向移动，这与背景大小小于 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>

【讨论】：

哦！我以为是滑动的背景，但它是框/按钮。非常感谢。谢谢大家！
@subzero 我在最后添加了更多示例以查看尺寸之间的差异；）您会了解更多:) ...顺便说一下，背景正在滑动到黄色框作为您的黄色框是你的按钮并且按钮是固定的:) 但两者都等同于运动，因为一切都是相对的

【解决方案2】：

从您的按钮中删除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;
}

我在下面的sn-p中添加了同样的内容。

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>

【讨论】：