通过背景颜色使文本显示背景悬停

Question

所以这是我没有盘旋的链接。

我试着查看如何使文本透明，以便您可以通过文本查看图像的背景，但无法找到有关此内容的任何内容。这是我将鼠标悬停在链接上时的样子。

以下是我正在执行此操作的div的代码。

#learnmore{
    padding: 10px;
    margin: 10px;
    border: 2px solid white;
    color: white;
}

#learnmore:link{
    padding: 10px;
    border: 2px solid white;
    color: white;
}

#learnmore:visited{
    padding: 10px;
    border: 2px solid white;
    color: white;
}

#learnmore:hover{
    background: white;
    color: transparent;
}

#learnmore:active{
    padding: 10px;
    border: 2px solid white;
    color: white;
}

<div id="offer">
    <img src="imgs/detroit.jpeg" title="" alt="">

    <h1>Offer Header</h1>

    <p>Here is a little bit of information about our offer.</p>

    <a href="" id="learnmore">Learn More</a>
    <a href="" id="scrolldown"><img src="imgs/down arrow.png"></a>
</div>

有人知道这是否可行？

Answer 1

  

如何使文本透明，以便您可以通过文本看到图像的背景

您可以使用mix-blend-mode: hard-light;。此外，您还有很多代码冗余（您对:link，:active等具有相同的规则），我使用,进行重构并将其组合在一起。

#learnmore,
#learnmore:link,
#learnmore:visited,
#learnmore:active {
  padding: 10px;
  margin: 10px;
  border: 2px solid white;
  color: white;
  font-size:40px;
  text-decoration:none;
}
#learnmore:hover {
  background-color:white;
  mix-blend-mode: hard-light;
  color: purple;
}
body {
  background-color: purple;
}

<div id="offer">
  <p>Here is a little bit of information about our offer.</p>

  <a href="" id="learnmore">Learn More</a>  
</div>

Answer 2

除非您想要处理跨浏览器支持，否则我建议您使用虚假修复。

在Promise.all([1, "string", true]).then(value => { let a: number = value[0]; // OK let b: number = value[1]; // Type 'string' is not assignable to type 'number'. ... }); 上设置文字颜色以匹配标题部分的颜色 背景在它下面。

＆＃13;

＆＃13;

char argString[1024]; sprintf(argString, __VA_ARGS__);

＆＃13;

:hover

＆＃13;

＆＃13;

＆＃13;

Answer 3

你尝试过使用不透明度吗？

  #learnmore: hover{
      background: white;
      color: black;
      opacity:.5;
   }