相关疑难解决方法(0)

我如何使用CSS3渐变为我background-color,然后应用一个background-image应用某种光透明纹理？

我有一个全屏固定的背景图像.我希望滚动div中的文本在顶部淡出,大概是通过在div的顶部应用渐变蒙版到背景.我感兴趣的是文本看起来像用户向下滚动时消失,但仍然有大面积的完全不透明度来实际阅读文本.

我知道webkit中有掩码选项,但我找不到一种方法可以淡化到包含文本的页面背景,只将渐变应用于元素的一小部分.

这是所需结果的图像:

我期待创造一个效果是这样的,但我的网站具有动态background-color.请注意,此示例使用白色叠加层,但不适用于不同的背景.

p {
    width: 300px;
    overflow: hidden;
    height: 50px;
    line-height: 50px;
    position: relative;
}
p:after {
    content: "";
    width: 100px;
    height: 50px;
    position: absolute;
    top: 0;
    right: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1));
}

我希望做的是设置一个CSS不透明度渐变.这种作品,但代码太乱了.看看第二个例子,我可以在jQuery中实现它,但有没有办法在CSS中完全做到这一点？

可能重复:
是否可以研究HTML元素的不透明度？

我试图使用css将div(及其边框和内容)淡入透明度(即顶部为实心,底部为透明).

有没有办法做到这一点？

我已经能够通过以下方式淡出背景:

.fade-to-nothing
{
    background-image: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255,1)), to(rgba(255,255,255,0)));
    background-image: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
    background-image: -o-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0));
    background-image: linear-gradient(to bottom, rgba(255,255,255,1),rgba(255,255,255,0));
    background-repeat: repeat-x;
}

但是也无法找到一种方法来对div的内容/边框进行操作.也许有某种嵌套或叠加？

编辑 继承我试图做的事情: