如何在div的所有内容中应用淡入淡出效果（而非动画）？ [英] How to apply a fade away effect (not animation) across all the content of a div?

问题描述

我想要一些CSS或其他技术，让我垂直淡入淡出正常外观上的div内容到底部完全白色（或任何颜色）。不是动画，只是一种静态效果。

I'd like to have some css or other technique that let's me vertically fade the contents of a div from normal appearance at the top to completely white (or whatever color) at the bottom. Not an animation, just a static effect.

我已经找到淡化背景的方法，例如

I have found ways to fade a background, e.g. Colorzilla's Gradient Editor

但是我希望这种效果适用于div（文本，图像等）的所有内容，如覆盖。如果我必须使其宽度固定，那是可能的。如果我真的需要修复垂直高度，那么我猜可能会被黑客攻击。我希望它在宽度和高度上都很灵活。

But I would like this effect to apply to all contents of a div (text, images, etc.), like an overlay. If I have to make it fixed width, that is possible. If I really have to fix the vertical height, that could be hacked somehow I guess. I would prefer it to be flexible in the width and height.

推荐答案

您可以使用CSS来做到这一点（没有图像或额外标记）使用 :: before 伪元素作为叠加层，线性渐变用于<从 0 到 1 ，c $ c> rgba（）不透明度。假设您不需要单独点击< div> 中的元素，因为叠加层可以防止这种情况发生。

You can do this with CSS (without an image or extra markup) using a ::before pseudo-element for the overlay, and linear-gradient for the fade with rgba() opacity from 0 to 1. This assumes you don't need to click on the elements in the <div> individually, since the overlay prevents that.

演示： http://jsfiddle.net/ThinkingStiff/xBB7B/

输出：

CSS：

CSS:

#overlay {
    position: relative;
}

#overlay::before {
    background-image: linear-gradient( top, 
            rgba( 255, 255, 255, 0 ) 0%, 
            rgba( 255, 255, 255, 1 ) 100% );
        background-image: -moz-linear-gradient( top, 
            rgba( 255, 255, 255, 0 ) 0%, 
            rgba( 255, 255, 255, 1 ) 100% );
        background-image: -ms-linear-gradient( top, 
            rgba( 255, 255, 255, 0 ) 0%, 
            rgba( 255, 255, 255, 1 ) 100% );
        background-image: -o-linear-gradient( top, 
            rgba( 255, 255, 255, 0 ) 0%, 
            rgba( 255, 255, 255, 1 ) 100% );
        background-image: -webkit-linear-gradient( top, 
            rgba( 255, 255, 255, 0 ) 0%, 
            rgba( 255, 255, 255, 1 ) 100% );
    content: "\00a0";
    height: 100%;
    position: absolute;
    width: 100%;
}

HTML：

HTML:

<div id="overlay">
    <span>some text</span><br />
    <img src="http://thinkingstiff.com/images/matt.jpg" width="100" /><br />
    <p>some more text</p>
</div>

这篇关于如何在div的所有内容中应用淡入淡出效果（而非动画）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！