logo标签列表

将CSS按钮过渡的线性渐变背景转换为透明背景

htmlcsslinear-gradients
6

我有一个带有线性渐变背景、橙色边框和文本的按钮。当我悬停在按钮上时，我希望背景变成透明，但不改变按钮的其他属性。

我已经尝试将不透明度过渡到0，但显然，这将隐藏边框和文本。我也尝试过过渡背景，但由于需要是透明的，所以没有终点可以过渡到，因此它不起作用。

body {
    background-color: darkblue;
}

.button {
    background-image: linear-gradient(red,yellow);
    border: solid orange 2px;
    border-radius: 10px;
    color: white;
    padding: 15px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 24px;
}
<button class="button">Submit</button>

4个回答
6
使用伪元素作为背景，您可以轻松实现以下效果： 

body {
  background-color: darkblue;
}

.button {
  border: solid orange 2px;
  border-radius: 10px;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 24px;
  position: relative;
  overflow: hidden;
  z-index:0;
  background:transparent;
}

.button::before {
  content: "";
  position: absolute;
  z-index:-1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(red, yellow);
  transition:1s;
}
.button:hover::before {
  opacity:0;
}
<button class="button">Submit</button>

这里有另一种不使用伪元素的方法，您可以依靠更改background-color和background-size来实现。诀窍是保持渐变颜色之一为透明，以便我们可以看到background-color（您可以对此进行渐变到透明的转换）。然后，增加background-size以隐藏底部颜色，我们只看到了透明的颜色。

body {
  background-color: darkblue;
}

.button {
  border: solid orange 2px;
  background-image: linear-gradient(transparent, yellow);
  background-size:100% 100%;
  background-color:red;
  border-radius: 10px;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 24px;
  transition:1s;
}

.button:hover {
  background-color:transparent;
  background-size:100% 500%;
}
<button class="button">Submit</button>

或者考虑调整background-size以获得另一种过渡效果:

body {
  background-color: darkblue;
}

.button {
  border: solid orange 2px;
  background: 
    linear-gradient(red, yellow),
    transparent;
  background-size:100% 100%;
  background-position:left; /*change this to change the way the transtion happen*/
  background-repeat:no-repeat;
  border-radius: 10px;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 24px;
  transition:1s;
}

.button:hover {
  background-size:0% 100%;
}
<button class="button">Submit</button>

最后一个转换正是我在弄清如何过渡到透明背景后要实现的，所以非常感谢你！ - Nick
2
在启用实验性Web平台功能的Chrome浏览器中（参见），我们可以使用以下内容："

Original Answer

"翻译成："最初的回答"。 

CSS.registerProperty({
  name: '--alpha', 
  syntax: '<number>', 
  initialValue: 1, 
  inherits: true,
})
body {
  background-color: darkblue;
}

.button {
  --alpha: 1;
  background: linear-gradient(rgba(255,0,0,var(--alpha)), rgba(255,255,0,var(--alpha))) transparent;
  border: solid orange 2px;
  border-radius: 10px;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 24px;
  transition: --alpha 1s linear;
}

.button:hover {
  --alpha: 0;
}
<button class="button">Submit</button>

enter image description here

enter image description here

1
现在我们可以使用新的@property。请查看支持表格。 

@property --alpha {
  syntax: '<number>';
  inherits: false;
  initial-value: 1;
}

body {
  background-color: darkblue;
}

.button {
  background-image: linear-gradient(rgba(255, 0, 0, var(--alpha)), rgba(255, 255, 0, var(--alpha)));
  transition: --alpha 1s;
  background-color: transparent;
  border: solid orange 2px;
  border-radius: 10px;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 24px;
}

.button:hover {
  --alpha: 0;
}
<button class="button">Submit</button>

clearInterval 丢失了。为什么要使用两个具有相同值的变量？ - Qwertiy
@Qwertiy 更新了新的方法。 - doğukan
-1

这可能会有所帮助：

body {
    background-color: darkblue;
}

.button {
    background-image: linear-gradient(red,yellow);
    border: solid orange 2px;
    border-radius: 10px;
    color: white;
    padding: 15px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 24px;
    transition: 2s;
    z-index: 1000;
    
}
button:hover{
background:linear-gradient(transparent, transparent);
}
<button class="button">Submit</button>

So, I just set the hover to a linear gradient of transparent, since you don't have a fixed color.

你的例子中没有转换。 - Temani Afif
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接