Change color for part of text that overlaps background [duplicate]

问题

I want to change text color to white for the 9 cards text part that overlaps with moving background element. How do I achieve this?

I looked on mix-blend-mode: screen; but it not seems to be applicable for this case. Here I exported compiled css/html for code snippet:

.wrapper {
  padding: 30px 0;
}

.chapter {
  margin-bottom: 20px;
  min-height: 200px;
  border-radius: 6px;
  background-color: #f6f8f9;
  padding: 50px 60px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.chapter__title {
  z-index: 1;
  position: relative;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.25;
  color: #444;
  text-decoration: none;
  transition: color 0.4s ease-in;
}

.chapter__link,
.chapter a {
  z-index: 1;
  position: relative;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.5;
  transition: color 0.4s ease-in;
}

.chapter__link i,
.chapter a i {
  font-size: 60%;
  margin-left: 5px;
  position: relative;
  bottom: -2px;
}

.chapter__label {
  position: absolute;
  right: 15px;
  top: 10px;
  font-size: 14px;
  text-transform: uppercase;
  z-index: 1;
}

.chapter__label--gray {
  text-transform: none;
  color: #aaa;
}

.chapter:after {
  content: "";
  z-index: 0;
  position: absolute;
  right: 30px;
  bottom: 0;
  width: 400px;
  height: 400px;
  background-color: #0a95ff;
  transform: translateX(-100%) translateY(-100%);
  border-radius: 50%;
  box-shadow: 0 0 0 0 #0a95ff;
  transition: transform 0.4s ease-out, box-shadow 0.4s ease-in, background-color 0.2s ease-out;
}

.chapter:hover {
  text-decoration: none;
  cursor: pointer;
}

.chapter:hover .chapter__title {
  color: white;
}

.chapter:hover .chapter__link,
.chapter:hover a {
  color: white;
}

.chapter:hover .chapter__link span:after,
.chapter:hover a span:after {
  width: 100%;
  background-color: white;
  transition: background-color 0.4s ease-in, width 0.2s ease-in;
  transition-delay: 0, 0.4s;
}

.chapter:hover:after {
  right: 30px;
  bottom: 0;
  transform: none;
}

.chapter:active:after {
  box-shadow: 0 0 0 300px #0a95ff;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="wrapper row">
    <div class="col-6 col-md-4">
      <a href="javascript:void(0)" class="chapter ">

        <div class="chapter__label chapter__label--gray">
          9 cards
        </div>
        <div class="chapter__title">
          Card title 1
        </div>
        <span class="chapter__link">
              <span>Card link</span>
        </span>
      </a>
    </div>
        <div class="col-6 col-md-4">
      <a href="javascript:void(0)" class="chapter ">

        <div class="chapter__label chapter__label--gray">
          9 cards
        </div>
        <div class="chapter__title">
          Card title 2
        </div>
        <span class="chapter__link">
              <span>Card link</span>
        </span>
      </a>
    </div>
        <div class="col-6 col-md-4">
      <a href="javascript:void(0)" class="chapter ">

        <div class="chapter__label chapter__label--gray">
          9 cards
        </div>
        <div class="chapter__title">
          Card title 3
        </div>
        <span class="chapter__link">
              <span>Card link</span>
        </span>
      </a>
    </div>
  </div>
</div>

回答1:

In pure css you can't. you can wrap the text part that overlaps in a span and then use color:white;

来源：https://stackoverflow.com/questions/54654145/change-color-for-part-of-text-that-overlaps-background

标签

css

animation