我遇到过一个问题，试图淡化 div 背景图像的边缘，使其看起来与整个站点的背景图像混合（因此背景图像应用于正文）。
body{
background-image: url('some url here') !important;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 100%;
background-size: 1150px;
}
#blendElement{
background: url('some other url here');
background-attachment: fixed;
background-repeat: no-repeat;
background-size: 100%;
}<head>
</head>
<body>
<div>
<div id="blendElement"> This should have edges blending to the main (body's) background image behind it.
</div>
</div>
</body>如果您曾经使用过 PowerPoint 并尝试过一种称为软边缘的图像效果，那么这正是我在这里尝试做的。我能找到的唯一相关的“答案”是通过使用带插图的框阴影来获取实体背景颜色：
box-shadow: 25px 25px 50px 0 (color matching background color) inset;
但由于主体有背景图像而不是纯色，因此无法使其看起来像是在混合。显然，在框阴影中使用透明颜色只会显示 div 背景图像，就像它通常看起来的那样。
有人可以帮我解决这个问题吗？（而且我无法编辑 div 图像以赋予其透明的淡入淡出边缘，因此必须直接使用 CSS 或 JS 完成）