使用CSS

Question

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

我问，因为我有相同的html结构div的不同类的多种不同的背景颜色，但我不想重写两个地方的所有颜色，使得更新的两倍。

我知道较少的事情和sass有可能有帮助的变量，但我很可能寻找纯粹的CSS方式，除非你能说服我。 （我和团队中的设计师一起工作，所以添加一个css预处理器似乎对他们来说有点太多了。）

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>