如何将Div的文本从完全不透明度淡化为无不透明度（无颜色）

Question

我正在尝试使用CSS中的渐变来淡化文本而不涉及任何颜色。

这是我正在尝试做的一个例子......

以下是一些可用于帮助我完成任务的源代码： https://jsfiddle.net/cwqenuy7/3/

HTML

<div id="fadedDiv">
   <p>Hello</p>
   <p>This</p>
   <p>Text</p>
   <p>Should</p>
   <p>Be</p>
   <p>Fading</p>
</div>

CSS

body {
    background-image: url('https://pbs.twimg.com/profile_images/664169149002874880/z1fmxo00.jpg');
}

#fadedDiv {
   width: 140px;
   height: auto;
   border: 1px solid red;
   padding: 0 20px;
    font-weight: bold;
}

#fadedDiv p {
   margin: 0;
}

非常感谢帮助！

Answer 1

要实现它，请使用Opacity css属性：

<p style="opacity:1">Hello</p>
<p style="opacity:0.8">This</p>
<p style="opacity:0.6">Text</p>
<p style="opacity:0.5">Should</p>
<p style="opacity:0.4">Be</p>
<p style="opacity:0.3">Fading</p>

您更新的JSFiddle