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

【问题标题】：How Can I Fade a Div's Text from Full Opacity to No Opacity (with no color)如何将 Div 的文本从完全不透明淡化为不透明（无颜色）
【发布时间】：2016-05-11 06:37:13
【问题描述】：

我正在尝试在不涉及任何颜色的情况下使用 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;
}

非常感谢您的帮助！

【问题讨论】：

如果您共享当前代码以在其中附加所需的代码而不是创建一个全新的页面，那就太好了..

标签： html css text gradient fade

【解决方案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

【讨论】：