Html CSS淡出div和内容的左边缘和右边缘

我有一个非常简单的HTML布局显示在这里

正文{
背景：水鸭；
}
#霉菌含量{
背景：小麦；
文本对齐：居中；
填充：20px；
利润率：20px；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。Ut sed turpis arcu。毛里斯·尤里西斯·埃吉特·尼斯奎斯拍卖行。Mauris magna lorem，posuere interdum的sodales，sodales quis purus。不，不，不，不。佩伦茨克在tempus Elite。塞德·欧尼姆·努克。悬钩子是菱形的，而不是最大的。Cras OVERLAPAT效能扫描电镜，位于OVERLAPAT nisl porttitor quis。因为佩伦茨克的酒后驾车，维塔·斯克利斯·梅特斯·普莱斯特拉特等人的酒后驾车是一次猫咪酒后驾车。艾尼安安特内克，调味品，香精。

因为你有一个已知的背景颜色，你可以在顶部叠加一个“已知背景->透明”的渐变。为了更好地控制，可以应用它两次：一次在左侧，一次在右侧

正文{
背景：水鸭；
}
#霉菌含量{
背景：小麦；
文本对齐：居中；
填充：20px；
利润率：20px；
位置：相对位置；
}
#内容：之后{
内容：''；
位置：绝对位置；
左：0；右：0；
顶部：0；底部：0；
背景图像：
线性梯度（向右，#008080，rgba（0128128,0）50px），
线性梯度（向左，#008080，rgba（0128128,0）50px）；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。Ut sed turpis arcu。毛里斯·尤里西斯·埃吉特·尼斯奎斯拍卖行。Mauris magna lorem，posuere interdum的sodales，sodales quis purus。不，不，不，不。佩伦茨克在tempus Elite。塞德·欧尼姆·努克。悬钩子是菱形的，而不是最大的。Cras OVERLAPAT效能扫描电镜，位于OVERLAPAT nisl porttitor quis。因为佩伦茨克的酒后驾车，维塔·斯克利斯·梅特斯·普莱斯特拉特等人的酒后驾车是一次猫咪酒后驾车。艾尼安安特内克，调味品，香精。

@DennisNovac这到底有什么帮助呢？？？它并没有淡化里面的文本内容。