我想要一个<div>元素（整个元素、内容和所有内容）向底部淡出。这是为了截断必须适合非常有限的空间（并且可以包含不可预测大小的元素）的新闻帖子。
我能找到的一切都是在背景颜色上使用透明渐变。除了新闻帖子后面是背景图像之外，这很好，所以我不能只在内容底部的顶部放置颜色渐变。
我会在内容顶部放置一个图像渐变，但随着用户滚动，背景会在内容后面移动。
所以想象一下这存在：
opacity: -webkit-linear-gradient( ... );
使元素的实际不透明度毕业是唯一可行的方法。是否可以？
浏览器世界已经使用掩码对这种能力进行了改进，然而，据我所知，目前还没有一个是跨浏览器完全标准化的（以一种很好的方式）。因此，无论您实施什么，它都会变得混乱。有关最近增强功能的更多信息，以下是一个很好的帖子：
https://css-tricks.com/clipping-masking-css/
Chrome 似乎在支持和速度方面胜出，Safari 紧随其后。遗憾的是 Firefox 不支持大部分链接到页面，除了依赖 SVG 的任何内容。幸运的是，SVG 示例显示出衰落，并且似乎可以在 Chrome、Safari 和 Firefox （至少是最新版本）上运行。
因此，也许目前最好的方法是实现一个 SVG 蒙版——基于一个应用了渐变的矩形——并使用mask: url(#maskid);. 然而，我倾向于发现这些解决方案会被 SVGviewBox和尺寸大小问题混淆——并且当不应用于“媒体”元素时会变得非常奇怪——所以现在暂不给出一个防水的例子。
目前实现这一点的唯一方法是使用绝对位置将渐变渐变叠加到要渐变的元素“顶部”的背景颜色。因此，使用上面其他答案中的渐变，但将其应用于文本顶部的浮动元素。
当您有纯色背景颜色时，这会获得最佳效果，但它也适用于背景图像，只要背景固定在适当位置即可。
css
.container {
position: relative;
overflow: hidden;
height: 50px; /* some fixed height that you need you content to fix to */
}
.fadeout {
position: absolute;
width: 100%;
height: 1em;
/* you can use a premade png fade out or a dynamic gradient here*/
background: ...;
}
标记
<div class="container">
<p>
This is my long text that goes on for paragraphs and paragraphs,
far longer than the container....
</p>
<div class="fadeout"></div>
</div>
在发现 Carson Myers 对这个问题的进一步评论后，我猜测以下可能可行。当我在上面提到背景必须固定时——我的意思是它必须以background-attachment. 因此，如果后台已经以这种方式实现，您可以使用以下“hack”来让事情正常工作。请记住，内容顶部的浮动绝对层可能会导致可用性问题。拥有许多透明层会降低旧浏览器的速度：
jsfiddle
下面的代码是一个示例，其外层设置为滚动其内容（以表示外部页面或正文），并且内部“新闻”区域具有有限的高度并淡出其其余内容。两种用途都background: url('...')需要填写相同的背景图片路径。因为在我测试过的所有现代浏览器中，背景图像在两个位置都是“固定的”，所以它会将背景计算到相同的位置。所以顶部的浮动图层与下面的图层具有相同的图形。
结果标记有点可怕体积庞大，因此您可以在支持不透明度的浏览器上将其转换为由 javascript 生成 - 并且可能使用淡出的任何“高度”。当前版本仅支持 20px 的淡入淡出。
css
.outer {
background: url('...') repeat fixed;
height: 200px;
overflow: auto;
}
.news {
position: relative;
width: 300px;
height: 100px;
overflow: hidden;
}
.news .fadeout {
position: absolute;
bottom: 0;
width: 100%;
}
.news .fadeout .fadeline {
height: 2px;
background: url('...') repeat fixed;
}
/* a good idea to add vendor prefixed versions of opacity here */
.news .fadeout .o09 { opacity: 0.9; }
.news .fadeout .o08 { opacity: 0.8; }
.news .fadeout .o07 { opacity: 0.7; }
.news .fadeout .o06 { opacity: 0.6; }
.news .fadeout .o05 { opacity: 0.5; }
.news .fadeout .o04 { opacity: 0.4; }
.news .fadeout .o03 { opacity: 0.3; }
.news .fadeout .o02 { opacity: 0.2; }
.news .fadeout .o01 { opacity: 0.1; }
标记
<div class="outer">
<div class="news">
<h4>News</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
suscipit dui ac lacus convallis dapibus. In cursus arcu at
arcu mollis vestibulum. Morbi ac quam sed nisl vulputate
aliquam in ac velit. Curabitur ac feugiat justo. Fusce
imperdiet, arcu non dignissim vulputate, leo odio ultricies
mauris, in consectetur risus odio malesuada sapien.
Nam sagittis convallis dictum. Duis eget lectus
</p>
<div class="fadeout">
<div class="fadeline o01"></div>
<div class="fadeline o02"></div>
<div class="fadeline o03"></div>
<div class="fadeline o04"></div>
<div class="fadeline o05"></div>
<div class="fadeline o06"></div>
<div class="fadeline o07"></div>
<div class="fadeline o08"></div>
<div class="fadeline o09"></div>
<div class="fadeline o10"></div>
<div class="fadeline o10"></div>
<div class="fadeline o10"></div>
<div class="fadeline o10"></div>
</div>
</div>
<div class="news">
<h4>News</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
suscipit dui ac lacus convallis dapibus. In cursus arcu at
arcu mollis vestibulum. Morbi ac quam sed nisl vulputate
aliquam in ac velit. Curabitur ac feugiat justo. Fusce
imperdiet, arcu non dignissim vulputate, leo odio ultricies
mauris, in consectetur risus odio malesuada sapien.
Nam sagittis convallis dictum. Duis eget lectus
</p>
<div class="fadeout">
<div class="fadeline o01"></div>
<div class="fadeline o02"></div>
<div class="fadeline o03"></div>
<div class="fadeline o04"></div>
<div class="fadeline o05"></div>
<div class="fadeline o06"></div>
<div class="fadeline o07"></div>
<div class="fadeline o08"></div>
<div class="fadeline o09"></div>
<div class="fadeline o10"></div>
<div class="fadeline o10"></div>
<div class="fadeline o10"></div>
<div class="fadeline o10"></div>
</div>
</div>
<div class="news">
<h4>News</h4>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut
suscipit dui ac lacus convallis dapibus. In cursus arcu at
arcu mollis vestibulum. Morbi ac quam sed nisl vulputate
aliquam in ac velit. Curabitur ac feugiat justo. Fusce
imperdiet, arcu non dignissim vulputate, leo odio ultricies
mauris, in consectetur risus odio malesuada sapien.
Nam sagittis convallis dictum. Duis eget lectus
</p>
<div class="fadeout">
<div class="fadeline o01"></div>
<div class="fadeline o02"></div>
<div class="fadeline o03"></div>
<div class="fadeline o04"></div>
<div class="fadeline o05"></div>
<div class="fadeline o06"></div>
<div class="fadeline o07"></div>
<div class="fadeline o08"></div>
<div class="fadeline o09"></div>
<div class="fadeline o10"></div>
<div class="fadeline o10"></div>
<div class="fadeline o10"></div>
<div class="fadeline o10"></div>
</div>
</div>
</div>
试试这个方便的工具，它会为你生成 alpha 颜色，你基本上是在尝试使用 rgba 值，但当然要知道这只会被较新的浏览器支持......
http://www.colorzilla.com/gradient-editor/
这是它为黑色到 100% alpha 渐变提出的方法：background: url(IMAGE_URL) linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(255,255,255,0) 100%);
如果您对此使用 JavaScript 没问题，那么您可以使用canvas元素来完成
这个想法是你的元素与文本和canvas元素是一个在另一个之上。您将文本保留在元素中（以便允许文本选择，这对于文本来说是不可能的canvas），但使其完全透明（使用rgba(0,0,0,0), 以使文本在 IE8 和更早版本中可见 - 那是因为您没有RGBa支持并且不canvas支持 IE8 及更早版本）。
然后，您读取元素内的文本并使用相同的字体属性将其写在画布上，这样您在画布上写的每个字母都会覆盖元素中带有文本的相应字母。
该canvas元素不支持多行文本，因此您必须将文本分解为单词，然后继续在测试行上添加单词，然后进行测量。如果测试线的宽度大于一条线的最大允许宽度（通过读取计算出的带有文本的元素的宽度来获得最大允许宽度），那么你将它写在画布上而不用添加最后一个单词，您将测试行重置为最后一个单词，并将写入下一行的 y 坐标增加一个行高（您也可以从元素与文本的计算样式中获得）。对于您编写的每一行，您还可以通过适当的步骤降低文本的不透明度（此步骤与每行的平均字符数成反比）。
在这种情况下，你不能轻易做的是证明文本的合理性。它可以完成，但它变得有点复杂，这意味着您必须计算每个步骤的宽度并逐字而不是逐行编写文本。
另外，请记住，如果您的文本容器在调整窗口大小时改变了宽度，那么您必须在每次调整大小时清除画布并在其上重新绘制文本。
好的，代码：
HTML：
<article>
<h1>Interacting Spiral Galaxies NGC 2207/ IC 2163</h1>
<em class='timestamp'>February 4, 2004 09:00 AM</em>
<section class='article-content' id='art-cntnt'>
<canvas id='c' class='c'></canvas>In the direction of the <!--and so on-->
</section>
</article>
CSS：
html {
background: url(moving.jpg) 0 0;
background-size: 200%;
font: 100%/1.3 Verdana, sans-serif;
animation: ani 4s infinite linear;
}
article {
width: 50em; /* tweak this ;) */
padding: .5em;
margin: 0 auto;
}
.article-content {
position: relative;
color: rgba(0,0,0,0);
/* add slash at the end to check they superimpose *
color: rgba(255,0,0,.5);/**/
}
.c {
position: absolute;
z-index: -1;
top: 0; left: 0;
}
@keyframes ani { to { background-position: 100% 0; } }
JavaScript：
var wrapText = function(ctxt, s, x, y, maxWidth, lineHeight) {
var words = s.split(' '), line = '',
testLine, metrics, testWidth, alpha = 1,
step = .8*maxWidth/ctxt.measureText(s).width;
for(var n = 0; n < words.length; n++) {
testLine = line + words[n] + ' ';
metrics = ctxt.measureText(testLine);
testWidth = metrics.width;
if(testWidth > maxWidth) {
ctxt.fillStyle = 'rgba(0,0,0,'+alpha+')';
alpha -= step;
ctxt.fillText(line, x, y);
line = words[n] + ' ';
y += lineHeight;
}
else line = testLine;
}
ctxt.fillStyle = 'rgba(0,0,0,'+alpha+')';
alpha -= step;
ctxt.fillText(line, x, y);
return y + lineHeight;
}
window.onload = function() {
var c = document.getElementById('c'),
ac = document.getElementById('art-cntnt'),
/* use currentStyle for IE9 */
styles = window.getComputedStyle(ac),
ctxt = c.getContext('2d'),
w = parseInt(styles.width.split('px')[0], 10),
h = parseInt(styles.height.split('px')[0], 10),
maxWidth = w,
lineHeight = parseInt(styles.lineHeight.split('px')[0], 10),
x = 0,
y = parseInt(styles.fontSize.split('px')[0], 10),
text = ac.innerHTML.split('</canvas>')[1];
c.width = w;
c.height = h;
ctxt.font = '1em Verdana, sans-serif';
wrapText(ctxt, text, x, y, maxWidth, lineHeight);
};
这是可能的，无需指定容器的高度。
检查这个工作演示，并尝试添加/删除内容#contents
HTML
<div id="container">
<div id="contents">
Some contents goes here
</div>
<div id="gradient">
</div>
</div>
CSS
#container {
position:relative;
}
#contents {
background:red;
}
#gradient {
position:absolute;
z-index:2;
right:0; bottom:0; left:0;
height:200px; /* adjust it to your needs */
background: url(data:image/svg+xml;base64,alotofcodehere);
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 70%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(70%,rgba(255,255,255,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 70%);
}
这几乎适用于任何支持不透明度的浏览器（包括 IE9），这是 IE8“rgba”后备（未经测试）：
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
要生成您自己的渐变，请访问Colorzilla。
第一个站点 (0%) 的不透明度必须为 0 ( rgba(255,255,255,0);)，然后是 70% 左右 - 做一些测试以找到对您有好处的 - 添加另一个不透明度为 1 ( rgba(255,255,255,1);) 的站点。
您必须知道页面/容器的背景才能使其明显工作......
</p>
目前没有优雅的单行 CSS 解决方案可以让您在所有浏览器中执行此操作。您可以使用非标准-webkit-mask-image属性 ( demo ) 或 SVG 掩码 ( demo )。迄今为止我见过的最完整的跨浏览器解决方案来自 Christian Schaefer 的教程“ CSS Masks – How To Use Masking In CSS Now ”。