模糊 div 的顶部和底部背景答案

【问题标题】：Blur top and bottom background of a div模糊 div 的顶部和底部背景
【发布时间】：2020-10-06 05:27:59
【问题描述】：

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

我想模糊/平滑它是顶部和底部背景颜色，而不是它自己的背景，只是顶部和底部，就像平滑它一样例如，您可以在 Photoshop 中进行操作。（顶部和底部，因为 div 的宽度是 100%，所以只有顶部和底部）。

例如（假设它的宽度是 100%）：

&lt;div id='this' style='background-color:gray; height: 500px;'&gt;&lt;/div&gt;

【问题讨论】：

标签： html css

【解决方案1】：

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

例子：

#this {
  background-image: linear-gradient(rgba(0,0,0,0) 0%, gray 10%, gray 90%, rgba(0,0,0,0);
  height: 500px;
}

【讨论】：