在CSS中剪切文本形状的图像会导致按钮文本被隐藏

Question

我一直在努力在文本上添加背景图像，以获得以下效果：

/* Clip text element */

.clip-text {
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 0.125em;
  padding: 0.5em 0.75em;
  text-align: center;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.clip-text:before,
.clip-text:after {
  position: absolute;
  content: '';
}


/* Background */

.clip-text:before {
  z-index: -2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: inherit;
}


/* Text Background (black zone) */

.clip-text:after {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
}

.clip-text--no-textzone:after {
  content: none;
}

.clip-text--cover,
.clip-text--cover:before {
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url('https://i.picsum.photos/id/767/500/500.jpg');
}

.main-text {
  text-transform: uppercase;
  font-size: 8em;
  font-weight: bold;
  line-height: 1;
  padding: 50px;
  margin-top: -50px;
}

.botton-container {
  margin-top: -80px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="wrapper">
  <div class="clip-text clip-text--cover">
    <div class="main-text">Lorem ipsum</div>
    <div class="text-center botton-container">
      <a class="btn btn-primary" href="/tests" target="_self">Click Here</a>
    </div>
  </div>
</div>

问题：

带有文本“ Click Here”的Bootstrap按钮隐藏了其文本。

为什么会发生，如何保持文本效果并同时在按钮上显示文本？

Answer 1

向按钮添加-webkit-text-fill-color: #fff;以重置其父级上设置的透明设置：

/* Clip text element */

.clip-text {
  overflow: hidden;
  position: relative;
  display: inline-block;
  margin: 0.125em;
  padding: 0.5em 0.75em;
  text-align: center;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.clip-text:before,
.clip-text:after {
  position: absolute;
  content: '';
}


/* Background */

.clip-text:before {
  z-index: -2;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: inherit;
}


/* Text Background (black zone) */

.clip-text:after {
  position: absolute;
  z-index: -1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
}


/* Change the background position to display letter when the black zone isn't here */

.clip-text--no-textzone:before {
  background-position: -0.75em 0;
}

.clip-text--no-textzone:after {
  content: none;
}


/* Use Background-size cover for photo background and no-repeat background */

.clip-text--cover,
.clip-text--cover:before {
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  background-position: 50% 50%;
  background-image: url('https://i.picsum.photos/id/862/500/500.jpg');
}

.main-text {
  text-transform: uppercase;
  font-size: 8em;
  font-weight: bold;
  line-height: 1;
  padding: 50px;
  margin-top: -50px;
}

.botton-container {
  margin-top: -80px;
}

.btn {
     -webkit-text-fill-color: #fff;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="wrapper">
  <div class="clip-text clip-text--cover">
    <div class="main-text">Lorem ipsum</div>
    <div class="text-center botton-container">
      <a class="btn btn-primary" href="/tests" target="_self">Click Here</a>
    </div>
  </div>
</div>