在不透明背景的透明文本

Question

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

Answer 1

这是一个简单的方法来做一点点'jquery。

fiddle

$(".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>

Answer 2

尝试一下。

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

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