我想要一个<div>元素（整个元素，内容和所有内容）淡出底部。这是为了截断一个必须适应非常严格的空间的新闻帖子（并且可能包含不可预测的大小元素）。
我能找到的所有东西都是在背景颜色上使用透明度渐变。除了新闻帖后面是一个背景图片，哪个会没问题，所以我不能只在内容底部的顶部放置一个颜色渐变。
我会在内容的顶部放置一个图像渐变，但是当用户滚动时，背景会移动到内容后面。
想象一下这就存在了：
opacity: -webkit-linear-gradient( ... );
毕业元素的实际不透明度是唯一可行的。有可能吗？
答案 0 :(得分：5)
浏览器世界对使用蒙版的这种能力进行了改进，但是，据我所知，它们之间并没有完全标准化（以一种很好的方式）。所以无论你实施什么，它都会变得混乱。有关最近增强功能的更多信息，以下是一个很好的帖子：
https://css-tricks.com/clipping-masking-css/
Chrome似乎在支持和速度方面取得了胜利，Safari也不甘落后。遗憾的是，除了依赖SVG的任何东西外，Firefox不支持链接到页面的大部分内容。幸运的是，SVG示例显示淡入淡出，似乎适用于Chrome，Safari和Firefox （至少是最新版本）。
所以也许现在最好的方法是实现一个SVG蒙版 - 基于一个应用了渐变的矩形 - 并使用mask: url(#maskid);进行分配。但是，我倾向于发现这些解决方案被SVG viewBox和尺寸大小问题弄糊涂了 - 并且在不应用于“媒体”元素时可能会非常奇怪 - 因此暂时不会给出一个防水示例。
目前实现此目的的唯一方法是使用绝对位置将要渐变的元素的“在顶部”的背景颜色渐变层叠。因此，使用上面其他答案中的渐变，但将其应用于文本顶部的浮动元素。
当您拥有纯色背景色时，这会获得最佳效果，但只要背景固定在适当的位置，它也可用于背景图像。
<强> 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>
在发现卡森迈尔斯关于这个问题的进一步评论后，我猜测以下内容可行。当我在上面说明背景必须修复时 - 我的意思是它必须以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>
答案 1 :(得分：2)
尝试这个方便的工具，它会为你生成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%);
答案 2 :(得分：2)
如果您可以使用JavaScript，那么您可以使用canvas元素
我们的想法是，带有文本和canvas元素的元素是一个在另一个上面的元素。您将文本保留在元素中（为了允许文本选择，canvas文本无法实现），但要使其完全透明（使用rgba(0,0,0,0)，以便在文本中显示文本IE8及更早版本 - 因为您在IE8及更早版本中没有RGBa支持且没有canvas支持。
然后读取元素中的文本并将其写在画布上，并使用相同的字体属性，这样您在画布上写的每个字母都会在带有文本的元素中的相应字母上。
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);
};
答案 3 :(得分：1)
可以在不指定容器高度的情况下进行。
选中此working demo，然后尝试添加/删除#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);）
您必须知道页面/容器的背景才能使其正常工作......
答案 4 :(得分：1)
目前还没有优雅的单行CSS解决方案可以让您在所有浏览器中执行此操作。您可以使用非标准-webkit-mask-image属性（demo）或SVG掩码（demo）。到目前为止，我见过的最完整的跨浏览器解决方案来自Christian Schaefer的教程，＆＃34; CSS Masks – How To Use Masking In CSS Now＆＃34;。
答案 5 :(得分：0)