html - 使用 CSS 淡入背景颜色

Question

有没有一种方法可以在不在子文本元素中使用线性渐变重新声明 background-color 的情况下获得以下淡入父 background-color 的效果？我想要一个消失的文字效果，如下所示。我在想也许是某种掩码，或者不透明技巧。它甚至可以利用继承背景颜色的优势。

我问是因为对于相同的 html 结构化 div，我有多种不同的背景颜色和不同的类，但我不想重写这两个地方的所有颜色，从而进行两次更新。

我知道 less 和 sass 之类的东西有可能有用的变量，但我很可能正在寻找一种纯 css 方式，除非你能说服我。 (我和团队中的设计师一起工作，所以添加一个 css 预处理器对他们来说似乎有点太多了。)

body {
  font-family: sans-serif;
  color: #000;
}

.main {
  height: 200px;
  background-color: rgb(100,255,150);
  padding: 20px;
}

.text {
  background-color: inherit;
  height: 100%;
  margin: 0;
  overflow: hidden;
  position: relative;
}

p:before {
  background: linear-gradient(to bottom, rgba(100,255,150,0.3) 60%, rgba(100,255,150,1)); 
  content: " ";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

<div class="main">
  <p class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae massa nisl. Sed in dignissim felis. Integer eu quam id massa posuere auctor. Curabitur consectetur velit urna, sit amet laoreet dui congue nec. Sed commodo nisl ac viverra semper. Proin at porttitor purus. Sed pretium vel diam fringilla venenatis. Aenean imperdiet lacinia lectus at dignissim. Sed nulla ligula, mollis at justo vitae, dictum gravida nisi. Maecenas lacinia risus neque. Ut et ante vitae erat tincidunt finibus et sit amet nunc. Quisque tellus ante, euismod vel vestibulum ut, commodo sed justo. In pellentesque, felis a consectetur eleifend, odio ex dapibus lorem, sit amet suscipit orci lacus eu ligula.

Fusce eget maximus ligula. Aenean eu mi et eros faucibus mattis. Sed bibendum hendrerit lorem, ut varius urna eleifend sit amet. Duis magna ex, auctor et commodo quis, posuere non purus. Nunc nec erat rutrum orci molestie volutpat. Suspendisse bibendum odio id ornare sodales. Nulla ornare libero ipsum, quis tempus odio molestie eu. Ut id libero mauris. Morbi vel tristique velit. Duis hendrerit erat dolor, sit amet euismod massa dictum nec.
  </p>
</div>

Answer 1

你可以使用这个解决方案，但是，它只适用于最新版本的现代浏览器，如 Chrome、Safari 和 Opera，Firefox 还没有完全支持这个功能。欲了解更多信息，请访问此处 CanIuse

body {
  font-family: sans-serif;
  color: #000;
}

.main {
  height: 200px;
  background-color: rgb(100,255,150);
  padding: 20px;
}

.text {
  background-color: inherit;
  height: 100%;
  margin: 0;
  overflow: hidden;
  position: relative;

  -webkit-mask-image: -webkit-gradient(linear, left top, 
    left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
  }
}

<div class="main">
  <p class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae massa nisl. Sed in dignissim felis. Integer eu quam id massa posuere auctor. Curabitur consectetur velit urna, sit amet laoreet dui congue nec. Sed commodo nisl ac viverra semper. Proin at porttitor purus. Sed pretium vel diam fringilla venenatis. Aenean imperdiet lacinia lectus at dignissim. Sed nulla ligula, mollis at justo vitae, dictum gravida nisi. Maecenas lacinia risus neque. Ut et ante vitae erat tincidunt finibus et sit amet nunc. Quisque tellus ante, euismod vel vestibulum ut, commodo sed justo. In pellentesque, felis a consectetur eleifend, odio ex dapibus lorem, sit amet suscipit orci lacus eu ligula.

Fusce eget maximus ligula. Aenean eu mi et eros faucibus mattis. Sed bibendum hendrerit lorem, ut varius urna eleifend sit amet. Duis magna ex, auctor et commodo quis, posuere non purus. Nunc nec erat rutrum orci molestie volutpat. Suspendisse bibendum odio id ornare sodales. Nulla ornare libero ipsum, quis tempus odio molestie eu. Ut id libero mauris. Morbi vel tristique velit. Duis hendrerit erat dolor, sit amet euismod massa dictum nec.
  </p>
</div>