我想要一个<div>元素(整个元素,内容和所有东西)淡出底部.它是截断一个必须适应非常严格的空间的新闻帖子(并且可能包含不可预测的大小元素).
我能找到的一切都是在背景颜色上使用透明度渐变.除了新闻帖后面是一个背景图片,哪个会没问题,所以我不能只在内容底部的顶部放置一个颜色渐变.
我将图像渐变放在内容的顶部,但是当用户滚动时,背景会移动到内容后面.
想象一下这存在:
opacity: -webkit-linear-gradient( ... );
毕业元素的实际不透明度是唯一可行的.可能吗？
浏览器世界对使用蒙版的这种能力进行了改进,但是,据我所知,它们之间并没有完全标准化(以一种很好的方式).所以无论你实施什么,它都会变得混乱.有关最近增强功能的更多信息,以下是一个很好的帖子:
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>