Question

以下代码在Chrome上有效，但在Safari上无效。我无法弄清楚原因，因此将不胜感激。可以在https://jacobcxdev.me/beta/找到现场演示（问题仍然存在）。可以找到here的屏幕录像。

CSS：

body {
    background-color: red;
}

.button {
  margin: 10px;
  padding: 10px 20px 10px 20px;
  font-size: 4vmin;
  font-weight: 100;
  border-radius: 10px;
  border-width: 1px;
  border-color: transparent;
  color: white;
  text-shadow: 0px 0px 6px rgba(255, 255, 255, 1);
  background-clip: text;
  -webkit-background-clip: text;
  transition: box-shadow, background-color;
  transition-duration: 0.5s;
  -webkit-transition: box-shadow, background-color;
  -webkit-transition-duration: 0.5s;
  transition-timing-function: ease;
  -webkit-transition-timing-function: ease;
}

.button:hover {
  transition: box-shadow, background-color, text-shadow, color;
  transition-duration: 0.5s;
  -webkit-transition: box-shadow, background-color, text-shadow, color;
  -webkit-transition-duration: 0.5s;
  transition-timing-function: ease;
  -webkit-transition-timing-function: ease;
  text-shadow: none;
}

@media (hover: hover) {
  .button:hover {
    background-clip: text;
    -webkit-background-clip: text;
    background-color: black;
    color: transparent;
    text-shadow: none;
    box-shadow: 0px 0px 10px -5px white, inset 0px 0px 200px -50px white;
  }
}

<body>
    <button class="button" onclick="location.href='about/'">About me</button>
</body>

<!--hover to view text-->

Answer 1

浏览器之间似乎对悬停时的颜色“透明”有所不同。您可以更改CSS来选择想要的文本颜色，这将适用于Chrome和Safari。

@media (hover: hover) {
    .button:hover {
        background-clip: text;
        -webkit-background-clip: text;
        background-color: black;
        color: black; /* change this color */
        text-shadow: none;
        box-shadow: 0px 0px 10px -5px white, inset 0px 0px 200px -50px white;
    }
}

-webkit-background-clip在Safari中不起作用

1 个答案: