Question

我真的怀疑我的要求是可能的，但仍然值得一试。

我正在尝试创建一个通常具有background-color: transparent; color: white;的按钮，当您将鼠标悬停在该按钮上时，这些属性应该交换。问题是，如果你只是交换它们，那么你看到的只是一个白色按钮。如果您知道包含元素的背景颜色，那么您可以从那里获得颜色，但如果按钮位于图像或画布上，那么这将无效。

到目前为止，我一直在这样做

html,
body {
  height: 100%;
}

#container {
  background-color: #38404D;
  height: 100%;
}

.ghost-button {
  background-color: transparent;
  border: 1px solid #ffffff;
  outline: none !important;
  transition: all 0.8s;
  margin: 10px 10px;
  padding: 6px 7px;
  cursor: pointer;
  color: #ffffff;
}

.ghost-button:hover {
  background-color: #ffffff;
  color: #38404D;
}

.ghost-button:active {
  box-shadow: inset 0 0 8px 0px #888888;
}

<div id="container">
  <button class="ghost-button">Hover Here</button>
</div>

更新

似乎有不少人对这个问题感到困惑。我问是否有办法完成我上面所做的完全相同的事情，但是在图像或画布之上（而不是纯色）。见下面的例子

html,
body {
  height: 100%;
}

#container {
  background-image: url("http://www.freegreatpicture.com/files/147/17878-hd-color-background-wallpaper.jpg");
  height: 100%;
}

.ghost-button {
  background-color: transparent;
  border: 1px solid #ffffff;
  outline: none !important;
  transition: all 0.8s;
  margin: 10px 10px;
  padding: 6px 7px;
  cursor: pointer;
  color: #ffffff;
}

.ghost-button:hover {
  background-color: #ffffff;
  color: #38404D;
}

.ghost-button:active {
  box-shadow: inset 0 0 8px 0px #888888;
}

<div id="container">
  <button class="ghost-button">Hover Here</button>
</div>

Answer 1

不，它在CSS中是不可能的！您可以尝试使用JS设置color以模仿此效果。

Answer 2

是的，使用mix-blend-mode的CSS可能 IS 。不幸的是，它仍然是partially supported（答案在2018年12月的更新：目前为under consideration为Edge）。

＆＃13;

.ghost-button {
  /* Important part */
  mix-blend-mode: screen;
  background: #000;
  color: #fff;

  /* Button cosmetics */
  border: .125em solid #fff;
  font: 2em/1 Cursive;
  letter-spacing: 1px;
  outline: none !important;
  transition: all .8s;
  padding: .5em 1em;
  cursor: pointer;
}

.ghost-button:hover {
  /* Important part */
  background: #fff;
  color: #000;
}

#container {
  background: url('http://www.freegreatpicture.com/files/147/17878-hd-color-background-wallpaper.jpg') center/cover;

  /* Also works with background-color or gradients: */
  /* background: linear-gradient(to right, red, yellow); */

  /* Container positioning */
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

html, body {
  margin: 0;
}

＆＃13;

<div id="container">
  <button class="ghost-button">Hover Here</button>
</div>

＆＃13;

正如你所看到的，这里的秘密在于使用mix-blend-mode: screen和black颜色来删除＆＃34;＃34;部分，因为使用此screen模式时黑色与背景混合。

Answer 3

body {
  height: 100%;
}

#container {
  background-color: #38404D;
  height: 100%;
}

.ghost-button {
  background-color: transparent;
  border: 1px solid #ffffff;
  outline: none !important;
  transition: all 0.8s;
  margin: 10px 10px;
  padding: 6px 7px;
  cursor: pointer;
  color: #ffffff;
}

.ghost-button:hover {
  background-color: none;
  color: red;
}

.ghost-button:active {
  box-shadow: inset 0 0 8px 0px #888888;
}

<div id="container">
  <button class="ghost-button">Hover Here</button>
</div>

悬停颜色设置为红色，您可以更新它。

是否可以将颜色“擦除”CSS中的背景？

3 个答案: