logo标签列表

CSS渐变背景色

htmlcss
3
我已经查找了很多地方，但似乎还没有可能实现这样的效果。 我正在寻找类似于不透明度渐变蒙版的东西，如果有意义的话。
就像这样：
https://istack.dev59.com/uAtZV.webp 它可能看起来只是一个从白色到透明的简单文本淡出效果，但更重要的是文本所在的div也会随之消失。文本溢出了div区域，因此提示用户向上滚动。
所以它就像photoshop中带有渐变的图层蒙版，也许类似于{opacity: linear-gradient(#fff, #000)}，是否存在这样的东西？
CSS是否可以实现这种效果？
也许某种覆盖层可以解决问题......不过我不确定。 - Sumner Evans
4个回答
2
您可以使用遮罩来实现此效果。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支持。

谢谢@vals，这正是我想要的。我会找一下浏览器兼容性预测，但现在这是一个不错的渐进增强 :) - PavKR
请确保您阅读有关-webkit-mask-image属性的浏览器支持情况。https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-image - crazymatt
2
是的，这是可能的。您可以使用诸如CSS Gradient Generator之类的工具获取所需的渐变颜色（甚至是透明度）。然后，您可以制作一个覆盖在文本上方的
元素。在您的情况下，您需要选择垂直淡化效果，然后允许顶部透明，底部有颜色。然后，您可以将带有渐变背景的
元素定位到文本上方。以下是我使用的代码：
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>

在特定的环境中，您需要对代码进行调整以使其正常工作，但这应该能帮助您入门。您可以在此处查看它的实际效果。希望对您有所帮助。

1
我不是在开玩笑 :) - crazymatt
1
你可以使用这个：
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'

你可以自定义线性渐变样式的颜色和百分比数量。
0
你可以使用伪元素实现这个效果（这样做能够减少标记语言的使用，同时也能提高页面渲染速度）：
（注意，这只是一个示例草稿，请根据自己需要进行颜色设置。） 

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

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接