Css 是否可以对HTML元素的不透明度进行分级？
我想要一个Css 是否可以对HTML元素的不透明度进行分级？,css,Css,我想要一个元素（整个元素、内容和一切）向底部淡出。这是为了截断一篇必须适应非常有限空间（并且可能包含大小不可预测的元素）的新闻文章 我能找到的所有东西都是在背景色上使用透明度渐变。这很好，除了在新闻帖子后面是一个背景图像，所以我不能只在内容底部的顶部放置一个颜色渐变 我会在内容上方放置一个图像渐变，但随着用户滚动，背景会移到内容后面 想象一下这是真的： opacity: -webkit-linear-gradient( ... ); 调整元素的实际不透明度是唯一可行的方法。有可能吗？试试这个方
opacity: -webkit-linear-gradient( ... );
调整元素的实际不透明度是唯一可行的方法。有可能吗？试试这个方便的工具，它会为您生成alpha颜色，您基本上是在尝试使用rgba值，但当然要知道，这只会得到更新浏览器的支持 这是它为黑色到100%的alpha渐变所做的：
background:url（IMAGE_url）线性渐变（到底部，rgba（0,0,0,1）0%，rgba（255255,0）100%）2015年更新
在浏览器世界中，使用掩码的这种能力已经得到了改进，然而，据我所知，还没有一种完全标准化的浏览器（以一种很好的方式）。所以无论你实现什么，它都会变得一团糟。有关最近增强功能的更多信息，请参阅以下帖子：
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: ...;
}
.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="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>
<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>
标记
<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>
<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>
新闻
Lorem ipsum dolor sit amet，是一位杰出的献身者。美国犹他州
酒后驾车。在cursus arcu中
前庭毛弓。Morbi ac quam sed nisl vulputate
在ac velit中的aliquam。库拉比图尔阿费吉亚特胡斯托。福斯
专制的饮食，无尊严的放纵，利奥·奥迪奥·尤里西斯
毛里斯，在圣殿里，俄罗斯人奥迪奥·马莱苏亚达·萨皮安。
南慈姑。杜伊斯·埃吉特·莱克图斯
新闻
Lorem ipsum dolor sit amet，是一位杰出的献身者。美国犹他州
酒后驾车。在cursus arcu中
前庭毛弓。Morbi ac quam sed nisl vulputate
在ac velit中的aliquam。库拉比图尔阿费吉亚特胡斯托。福斯
专制的饮食，无尊严的放纵，利奥·奥迪奥·尤里西斯
毛里斯，在圣殿里，俄罗斯人奥迪奥·马莱苏亚达·萨皮安。
南慈姑。杜伊斯·埃吉特·莱克图斯
新闻
Lorem ipsum dolor sit amet，是一位杰出的献身者。美国犹他州
酒后驾车。在cursus arcu中
前庭毛弓。Morbi ac quam sed nisl vulputate
在ac velit中的aliquam。库拉比图尔阿费吉亚特胡斯托。福斯
专制的饮食，无尊严的放纵，利奥·奥迪奥·尤里西斯
毛里斯，在圣殿里，俄罗斯人奥迪奥·马莱苏亚达·萨皮安。
南慈姑。杜伊斯·埃吉特·莱克图斯
这就是你要找的吗
看看我的眼睛
我不确定你想要什么，因为你的描述不令人满意。你能解释一下问题是什么吗？这是可能的，不需要指定容器的高度
选中此项，然后尝试从#contents
HTML
这几乎适用于任何支持不透明度的浏览器（包括IE9），以下是IE8“rgba”回退（未测试）：
要生成自己的渐变，请访问
第一个停止点（0%）的不透明度必须为0（rgba（255255,0）；
），然后大约70%-进行一些测试以找到对您有利的内容-添加另一个不透明度为1的停止点（rgba（255255,1）；
）
您必须了解页面/容器的背景，才能使其正常工作
如果您同意使用JavaScript来实现这一点，那么可以使用canvas
元素来实现
其思想是，您的元素与文本和canvas
元素位于
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 );
<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>
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; } }
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);
};