模糊div的顶部和底部背景

Question

我有一个div，背景为灰色。在div中，我有一些文字。

我要模糊/平滑它是顶部和底部背景色，而不是像平滑背景一样仅将顶部和底部作为背景色例如，您可以在photoshop中完成操作。.（顶部和底部是因为div的宽度为100％，所以只有顶部和底部是这样）。

例如（假设其宽度为100％）：

<div id='this' style='background-color:gray; height: 500px;'></div>

Answer 1

要“模糊”纯色背景，请使用线性渐变。

示例：

{{1}}

• 请参阅<gradient>（MDN）
• 请参阅linear-gradient()（MDN）