悬停时的背景图像无法正常工作

Question

我正在尝试添加一个悬停效果，当用户悬停在按钮上时添加背景图像，但在悬停时左侧有一小块区域仍然是透明的。

基本上，我添加了两个按钮，彼此相邻，问题出在第二个按钮上，如果我删除第一个按钮或将第二个按钮移到下一行，则它完全可以正常工作。

这是我得到的。

这是我移除第一个按钮后的样子

这是代码

.gradient-button-1 {
    color: orangered;
    background: none;
    padding: 1.5rem 3rem;
    font-size: 1.3rem;
    border: solid 10px transparent;
    border-image: linear-gradient(to top right, orangered,yellow);
    
    border-image-slice: 1;
    outline: none;
    transition: all ease 0.3s;
}

.gradient-button-1:hover {
    background-image: linear-gradient(to top right, orangered,yellow);
    color: white;
}

.gradient-button-2 {
    color: orangered;
    background: none;
    padding: 1.5rem 3rem;
    font-size: 1.3rem;
    border: solid 10px transparent;
    border-image: linear-gradient(to right, orangered,transparent);
    border-image-slice: 1;
    outline: none;
    transition: all ease 0.3s;
}
.gradient-button-2:hover {
    background-image: linear-gradient(to right, orangered,transparent);
    border-right: none;
    border-right-style: none;
    color: white;
    
}

<section>

          <h4>Gradient Bordered Buttons</h4>
          <button type="button" name="button" class="gradient-button-1">Gradient button 1</button>
          <button type="button" name="button" class="gradient-button-2">Gradient button 2</button>

        </section>

Answer 1

.gradient-button-1 {
    color: orangered;
    background: none;
    padding: 1.5rem 3rem;
    font-size: 1.3rem;
    border: solid 10px transparent;
    border-image: linear-gradient(to top right, orangered,yellow);
    
    border-image-slice: 1;
    outline: none;
    transition: all ease 0.3s;
}

.gradient-button-1:hover {
    background-image: linear-gradient(to top right, orangered,yellow);
    color: white;
     background-position: -1px;
    background-size: 101%;
}

.gradient-button-2 {
    color: orangered;
    background: none;
    padding: 1.5rem 3rem;
    font-size: 1.3rem;
    border: solid 10px transparent;
    border-image: linear-gradient(to right, orangered,transparent);
    border-image-slice: 1;
    outline: none;
    transition: all ease 0.3s;
    
     
     
}
.gradient-button-2:hover {
    background-image: linear-gradient(to right, orangered,transparent);
    border-right: none;
    border-right-style: none;
    color: white;
    
  
    
}

<section>

          <h4>Gradient Bordered Buttons</h4>
          <button type="button" name="button" class="gradient-button-1">Gradient button 1</button>
          <button type="button" name="button" class="gradient-button-2">Gradient button 2</button>

        </section>

Answer 2

在某些屏幕尺寸下，背景不是从最左边开始；这就是它留下一个小间隙（白线）的原因。

您可以将 background-origin: border-box; 添加到 .gradient-button-2:hover。可以在 MDN:

找到一个很好的解释和一个活生生的例子

The background-origin CSS property sets the background positioning area. In other words, it sets the origin position of an image set with the background-image property.

.gradient-button-1 {
    color: orangered;
    background: none;
    padding: 1.5rem 3rem;
    font-size: 1.3rem;
    border: solid 10px transparent;
    border-image: linear-gradient(to top right, orangered,yellow);
    
    border-image-slice: 1;
    outline: none;
    transition: all ease 0.3s;
}

.gradient-button-1:hover {
    background-image: linear-gradient(to top right, orangered,yellow);
    color: white;
}

.gradient-button-2 {
    color: orangered;
    background: none;
    padding: 1.5rem 3rem;
    font-size: 1.3rem;
    border: solid 10px transparent;
    border-image: linear-gradient(to right, orangered,transparent);
    border-image-slice: 1;
    outline: none;
    transition: all ease 0.3s;
}
.gradient-button-2:hover {
    background-image: linear-gradient(to right, orangered,transparent);
    border-right: none;
    border-right-style: none;
    color: white;
    background-origin: border-box; /* This line is new! */
}

<section>

          <h4>Gradient Bordered Buttons</h4>
          <button type="button" name="button" class="gradient-button-1">Gradient button 1</button>
          <button type="button" name="button" class="gradient-button-2">Gradient button 2</button>

        </section>

悬停时的背景图像无法正常工作

background-image in hover doesn't works properly

css

hover

border-image