不透明背景上的透明文本答案

【问题标题】：Transparent text on opaque background不透明背景上的透明文本
【发布时间】：2016-12-02 02:35:24
【问题描述】：

我见过很多与我需要的完全相反的问题。我想要一个按钮，当它悬停在上面时，会有一个不透明的背景，但文本是主体背景图像的颜色。

【问题讨论】：

我没有带电脑。我尝试将背景颜色设置为我需要的颜色，然后将颜色设置为透明，但透明文本只是显示了背景。我正在使用一个直接在 body 元素中的按钮，它有一个背景图片

【解决方案1】：

这是一个简单的方法，用一点 o' jquery 来完成。

$(".filter").hover(function() {
  $(this).css("opacity", ".8");
}, function() {
  $(this).css("opacity", ".4");
});

#box {
  background-image: url("http://vignette2.wikia.nocookie.net/despicableme/images/7/7a/Gru_thinking.jpg/revision/latest?cb=20130901203940");
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  border: 1px solid;
  width: 500px;
  height: 300px;
  position: relative;
  opacity: 1;
}

.filter {
  width: 100%;
  height: 100%;
  background-color: white;
  opacity: 0.4;
}

p {
  width: 100%;
  height: 100%;
  color: #000;
  text-align: center;
  margin: auto;
}

p:hover {
  width: 100%;
  height: 100%;
  color: lightblue;
  text-align: center;
  margin: auto;
}

a{text-decoration:none;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">

  <div id="box">

    <div class="filter">
      <p>
        hello my name is rachel
      </p>
    </div>
  </div>

</a>

【讨论】：

【解决方案2】：

尝试一下。

body{background-color:#000;}`
button{
color:white;`

background-color:red;} button:hover, button:focus{ color:transparent; background-color:rgba(255,0,0,.5)}

【讨论】：