Question

如何为按钮背景制作纯粹纯色的敲除文本。

这里的按钮：

＆＃13;

button {
  background-color: white;
  border: none;
  color: white;
  padding: 1em 4em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.5em;
  margin: 2em;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  cursor: pointer;
  background-color: transparent;
  color: white;
  border: 0.1em solid white;
  border-radius: 0.5em;
}

button:hover {
  background-color: white;
  color: black;
}

button:focus,
button:active {
  outline: none;
}

＆＃13;

<button>Sign Up</button>

＆＃13;

所以现在我有按钮的轮廓和文字，当我将鼠标悬停在按钮的背景上时，按钮的背景会填满颜色，我想让文字从按钮的背景中剪掉。

如何使用CSS执行此操作？

Answer 1

button:hover {   
   background-color: *fill the color you want*;  
   color: black;
}

Answer 2

从背景中剪切文字是什么意思？如果你想隐藏它，你可以这样做：

button:hover {
    background-color: white;
    color: transparent;
}

Answer 3

我们可以使用-webkit-background-clip: text;因此我们剪切背景以获取文本的形状，并使文本颜色透明，然后我们放置的任何内容将通过文本显示背景。

＆＃13;

body {
  margin: 0;
}

button {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 10em;
  color: transparent;
  border: 1px solid black;
  -webkit-background-clip: text;
  transition-duration: 0.4s;
  background-color: purple;
}

button:hover {
  background-color: orange;
}

＆＃13;

<button>mg</button>

＆＃13;

按钮背景的淘汰赛文本

3 个答案: