CSS淡入背景

Question

我已经到处看了很多，所以它看起来还不可能。 如果有意义，我正在寻找像不透明度渐变蒙版的东西。

像这样：

它可能看起来像一个直接的文字从白色变为透明，但它更像是文本在其中淡化为背景的div。 文本溢出div区域，因此它指示用户向上滚动。

所以它就像是一个在photoshop中带有渐变的图层蒙版，可能像{opacity: linear-gradient(#fff, #000)}之类的东西，会出现这样的事情吗？

这完全是CSS的可能吗？

Answer 1

是的，可能。您可以使用CSS Gradient Generator之类的工具来获得所需的渐变颜色（甚至透明度）然后您可以制作一个超出文本的div。在您的情况下，您可能希望选择垂直淡入淡出，然后允许顶部透明，底部将有颜色。然后，您可以将div的渐变背景放在文本上。这是我使用的代码：

CSS

.over {
     background: -moz-linear-gradient(top,  rgba(30,87,153,0) 0%, rgba(125,185,232,1) 100%); /* FF3.6+ */
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,0)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
     background: -webkit-linear-gradient(top,  rgba(30,87,153,0) 0%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
     background: -o-linear-gradient(top,  rgba(30,87,153,0) 0%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */
     background: -ms-linear-gradient(top,  rgba(30,87,153,0) 0%,rgba(125,185,232,1) 100%); /* IE10+ */
     background: linear-gradient(to bottom,  rgba(30,87,153,0) 0%,rgba(125,185,232,1) 100%); /* W3C */
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
     width: 600px;
     height: 600px;
     position: absolute;
     left: 0;
     top: 0;
}

.text {
    color: red;
    width: 580px;
}

HTML

<div class="over"></div>
<div class="text">
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
     <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</p>
</div>

您需要使用代码才能使其适用于您的特定环境，但这应该可以帮助您入门。 You can see it in action here。希望有所帮助。

Answer 2

您可以使用：

background:-moz-linear-gradient(-65deg, #e0e0e0 30%, #e0e0e0 10%, 
#e0e0e0 20%, #4285F4 40%, #4285F4 50%, #fff 70% );
filter:progid:DXImageTransform.Microsoft.gradient
(GradientType=0, startColorstr='#4285F4', endColorstr='#63a62f');
 /* For Internet Explorer 5.5 - 7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient
(GradientType=0, startColorstr='#4285F4', endColorstr='#63a62f')"; 
/* For Internet Explorer 8 */}

从这里开始：

-65deg, #e0e0e0 30%, #e0e0e0 10%, #e0e0e0 20%, #4285F4 40%, #4285F4 50%, #fff 70%

要自定义IE外观，您可以从此处对其进行样式化：

startColorstr='#4285F4', endColorstr='#63a62f'

您可以自定义所需的颜色和线性渐变样式的过程数。

Answer 3

您可以通过屏蔽获得此效果。 mask-image = gradient使它

.base {
  background: url("http://placekitten.com/1000/750");
  width: 400px;
  background-size: cover;
}

.faded {
  -webkit-mask-image: linear-gradient(0deg, transparent, black);
  }

<div class="base">
  <div class="faded">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non tincidunt augue. Vestibulum sit amet est et tellus blandit bibendum quis id neque. Quisque lacinia, nunc et pharetra egestas, mi sapien tristique ante, quis fringilla sem leo et eros. Donec porttitor id nisl non egestas. Cras sed neque consectetur, hendrerit est in, ullamcorper sem. Suspendisse dolor nunc, maximus ac elit efficitur, congue tempus nisi. Fusce nec imperdiet mi, a porttitor sem. Vestibulum tincidunt, libero a lacinia commodo, felis sapien malesuada turpis, eu accumsan ligula elit vestibulum ipsum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla gravida varius ex ac luctus. In non sapien nibh. Aliquam efficitur eu risus vitae aliquam. Nunc risus est, tincidunt sit amet consectetur quis, bibendum nec tellus. Vivamus non faucibus velit, nec tempor quam.

Morbi sem tortor, tristique at ex in, cursus gravida ante. Curabitur ut mi id arcu semper ullamcorper id mollis nibh. Phasellus et pharetra odio. Mauris lacinia hendrerit ante. Donec cursus urna felis, vitae dictum neque varius sit amet. Donec ut tristique turpis. Integer faucibus dictum tempus. Suspendisse id eros a erat sodales hendrerit. Ut et mauris quis sapien dictum pharetra. Pellentesque ornare nulla diam, porttitor interdum felis ultricies non. Proin tempus libero in lacus efficitur elementum. Morbi venenatis dignissim ante, sed bibendum libero tempor vitae.</div></div>

这仅适用于webkit浏览器。您可以通过svg元素

来获得Firefox支持

Answer 4

您可以为此使用伪元素（这会减少标记并加快渲染速度）：

（请注意。这只是一个草稿，仅供参考。请使用自己的颜色。）

＆＃13;

＆＃13;

html,body{
  margin:0;
  padding:0;
  }
div{
  position:relative;
  height:300px;
  width:400px;
  margin:0 auto;
  display:inline-block;
  overflow:auto;
  align-content:center;
  }
div:before{
  content:"";
  position:fixed;
  top:0;
  left:0;
  height:300px;
  width:400px;
  background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */

  }

＆＃13;

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse justo sapien, ultrices vel lorem eu, dapibus commodo dui. Maecenas sagittis massa id libero malesuada, et vehicula libero dapibus. Etiam porta luctus tellus volutpat tempus. Etiam urna
  velit, consequat sit amet nisl non, laoreet auctor quam. Suspendisse pellentesque ultricies ullamcorper. In commodo finibus lacinia. Sed eget lobortis sem. Nulla egestas hendrerit odio at elementum. Mauris orci orci, viverra id lectus id, elementum
  varius lorem. Mauris efficitur lectus non laoreet aliquam. Aliquam laoreet elit justo, ut accumsan purus vestibulum at. Suspendisse eget fermentum leo. Integer laoreet mi sit amet turpis luctus lobortis. Aliquam auctor lacinia nisl, in interdum mi posuere
  ut. Sed turpis ante, efficitur vitae mi eu, tristique iaculis neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed mattis dolor sit amet iaculis malesuada. Nulla pulvinar, sapien quis vehicula ullamcorper,
  magna ante euismod ex, id placerat arcu nisi vel urna. Etiam lorem velit, bibendum congue bibendum in, tincidunt eget magna. Integer dictum molestie felis, eget bibendum velit aliquam vel. Quisque felis purus, bibendum vel augue ut, vestibulum iaculis
  lorem. Proin in mi aliquam, aliquam erat quis, imperdiet nibh. Nulla scelerisque sollicitudin nisi et dignissim. Proin placerat leo dolor, non hendrerit lacus aliquet quis. Nam tempus, urna sed sollicitudin porttitor, tellus felis hendrerit eros, et
  lacinia arcu arcu id lectus. Duis molestie arcu in finibus dictum. In porttitor massa sit amet urna porta, sed iaculis leo fermentum. Quisque augue risus, pulvinar nec est sit amet, commodo fringilla velit. In blandit urna eget quam finibus, ac facilisis
  ante tincidunt. Duis luctus libero eu aliquet viverra. Suspendisse tincidunt eros euismod suscipit scelerisque. Sed tincidunt enim vel ultrices pellentesque. Cras id volutpat metus. Sed sagittis ut quam vel dapibus. Nulla interdum ut enim sed gravida.
  Suspendisse lacinia orci ut tellus imperdiet, hendrerit rhoncus mi rhoncus. Nulla tempus risus erat, nec convallis quam imperdiet vitae. Sed sodales malesuada hendrerit. Proin malesuada erat nec arcu faucibus feugiat. In hac habitasse platea dictumst.
  Suspendisse sagittis nunc id risus hendrerit, ut luctus augue maximus. Nunc varius sit amet arcu eu sagittis. Pellentesque convallis convallis finibus. Nulla rhoncus risus in ipsum pharetra tempus. Aenean id accumsan leo. Mauris imperdiet suscipit est,
  sed vehicula neque sagittis nec. Mauris sit amet tincidunt velit. Quisque scelerisque facilisis ligula sit amet aliquam. Maecenas vel magna vel sapien congue congue quis ut orci. Vivamus vel elementum erat. Duis scelerisque odio sed ligula condimentum
  fermentum. Praesent ac arcu eu nibh vehicula tempus ut sed lorem. Vestibulum ligula sapien, ornare et vehicula in, gravida et mauris. Vestibulum dignissim tellus eu nulla consequat pharetra. Praesent varius sem et ultricies bibendum. Maecenas cursus
  egestas egestas. Sed mollis, orci malesuada tempor malesuada, sem elit ornare odio, ac hendrerit metus lorem faucibus sem. Cras lacinia elementum arcu sed cursus. Integer cursus velit arcu, sit amet commodo metus ultricies ultricies. In hac habitasse
  platea dictumst. Nulla pellentesque sem sapien. Cras lobortis in ante in vestibulum. Nulla faucibus, lectus et mattis vehicula, ex arcu interdum enim, nec efficitur elit tortor id dolor. Curabitur scelerisque tempor tellus vitae lacinia. Vivamus eget
  dolor quis diam pretium ultrices vitae eu ipsum.
</div>

＆＃13;

＆＃13;

＆＃13;