如何将 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

要实现它，请使用不透明度 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

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

How Can I Fade a Div's Text from Full Opacity to No Opacity (with no color)

html

css

text

gradient

fade