css - 是否可以分级 HTML 元素的不透明度？

Question

我想要一个 <div>元素(整个元素、内容和所有内容)向底部淡出。这是为了截断必须适合非常有限的空间(并且可能包含大小无法预测的元素)的新闻帖子。

我能找到的所有内容都是关于在背景颜色上使用透明度渐变。这会很好，除非新闻帖子后面是背景图片，所以我不能只在内容底部的顶部放置颜色渐变。

我会在内容上方放置一个图像渐变，但随着用户滚动，背景会移动到内容后面。

想象一下这个存在:

opacity: -webkit-linear-gradient( ... );

渐变元素的实际不透明度 是唯一可行的方法。可能吗？

Answer 1

2015年更新

浏览器世界已经针对使用掩码的这种能力进行了改进，但是，据我所知，还没有一个是跨浏览器完全标准化的(以一种很好的方式)。因此，无论您实现什么，它都会变得困惑。有关最近增强功能的更多信息，以下是一篇很好的帖子:

https://css-tricks.com/clipping-masking-css/

Chrome 似乎在支持和速度方面胜出，Safari 紧随其后。遗憾的是 Firefox 不支持很多链接到页面，除了任何依赖 SVG 的东西。幸运的是，SVG 示例显示淡入淡出并且似乎可以在 Chrome、Safari 和 Firefox (至少是最新版本) 上工作。

因此，也许目前最好的方法是实现一个 SVG 蒙版——基于应用了渐变的矩形——并使用 mask: url(#maskid); 分配它。然而，我倾向于发现这些解决方案会被 SVG viewBox 和尺寸大小问题弄糊涂——而且当不应用于“媒体”元素时可能会变得非常奇怪——所以我将暂缓给出一个防水的例子现在。

基本原则

目前实现此目的的唯一方法是使用绝对位置在要淡入淡出的元素的“顶部”将渐变淡入淡出到背景颜色。因此，使用上面其他答案的渐变，但将其应用于文本顶部的 float 元素。

当你有一个纯色的背景时，这会得到最好的效果，但它也适用于背景图像，只要背景固定在适当的位置。

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”来使事情正常进行。请记住，在内容之上 float 绝对层会导致可用性问题......并且拥有许多透明层会降低旧浏览器的速度:

jsfiddle

http://jsfiddle.net/kthPT/30

下面的代码是一个示例，外层设置为滚动其内容(代表外部页面或正文)，内部“新闻”区域的高度有限并淡出他们的其余内容。 background: url('...') 的两种用法都需要填写相同的背景图片路径。因为背景图像在我测试过的所有现代浏览器的两个位置都是“固定的”，所以它会将背景计算到相同的位置。所以上面的 float 图层与下面的图层具有相同的图形。

生成的标记有点可怕庞大，因此您可以在支持不透明度的浏览器上将其转换为由 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>