CSS3淡出文本答案

【问题标题】：CSS3 fading out textCSS3淡出文本
【发布时间】：2013-07-06 06:37:22
【问题描述】：

我一直试图让我的文字淡出。我尝试了一些在 Internet 上找到的代码，但它们似乎仅适用于块元素。
如何使其工作？
这是我想要得到的：

哦，我不想要 Internet Explorer 支持。

最好的问候，马里奥厄曼多

【问题讨论】：

你在 JSFIDDLE 中尝试过你的代码吗？
你在说什么他的“代码”。粘贴一些示例或 jsfiddle 链接
它们只适用于块元素，而文本是内联元素。

标签： css gradient blur

【解决方案1】：

没关系，我已经找到了自己的解决方案。

blablablabla<span class="readmore">blablablabla</span>

.readmore {
-webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 40%);
}

不幸的是，仅适用于 webkit。

【讨论】：

我使用它如下： -webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 80%, rgba(0, 0, 0 , 0) 100%);因为我认为这是最常见的看。再次感谢。

【解决方案2】：

这里是Fiddle Example，你可以试试喜欢这个。

html

<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vestibulum massa     nec mi porta ut dictum dolor consectetur. Nunc imperdiet fermentum mauris, aliquam rhoncus magna suscipit eget. Cras neque velit, posuere ut pulvinar eu, faucibus sit amet tellus. Nullam sed orci tempus risus commodo commodo.</li>
</ul>

css

body {
font-family: 'Lucida Grande', 'Helvetica Neue', sans-serif;
font-size: 13px;
 }

 ul { margin: 20px; padding: 0; }

 li {
position: relative;
overflow: hidden;
white-space: nowrap;
background-color: #fff;
 }
 li:after {
content: "";
pointer-events: none;
position: absolute;
width: 100px;
height: 100%;
top: 0; right: 0;

background-image: -webkit-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(right, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
background-image: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
 }

 /*
 This piece of code works great too, but only on Webkit Browsers!
 li {
color: white;
position: relative;
overflow: hidden;
white-space: nowrap;
-webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 85%, rgba(0, 0, 0, 0) 100%);
 }
 */

【讨论】：

没有white-space: nowrap;有办法吗？
如果我需要在文本块的右侧和底部有两个渐变怎么办？

【解决方案3】：

对于 Google 员工，这是我在网上搜索后想出的一个简单的通用解决方案。

.excerpt {
  position: relative;
}

.excerpt::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: linear-gradient(to bottom, transparent, white);
}

你可以玩linear-gradient的参数来得到不同的结果，比如to right，或者transparent 25%。

Try the Fiddle.

【讨论】：

如果背景是纯色则很好。否则会一团糟。

【解决方案4】：

对于未来来到这里的人来说，CSS4 可能已经包括：

text-overflow: fade;

https://drafts.csswg.org/css-ui-4/#text-overflow

https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow

2017 年的问候。

【讨论】：

不幸的是，我认为你的千里眼是faulty。（但是，在我写这篇文章的时候，你的代表和当年一样。creepy...）