【问题标题】：Image Right Edge Fade/Blur CSS图像右边缘淡入/模糊 CSS
【发布时间】：2015-03-26 17:37:00
【问题描述】：

我有一个简单的 CSS 相关问题。如何获得如图所示的右端模糊/淡化？

【问题讨论】：

-webkit-mask-image，但仅适用于 Chrome

【解决方案1】：

使用从完全透明到白色的 CSS 渐变，并将其放置在图像的 RHS 上方。

background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);

检查哪些供应商前缀适用于您的目标平台。

【讨论】：

【解决方案2】：

两种方法

让我们做这个：

1。使用 box-shadow

浏览器兼容性： IE 9 + for box-shadow.

在 div 中放置适当的 box-shadow inset
div 有左填充，使其文本与背景的白色部分对齐（@987654323@ 进入宽度）

盒子阴影示例

div {
  background: url(https://i.stack.imgur.com/AF4np.jpg) no-repeat;
  height: 500px;
  width: 500px;
  border: solid 1px #000;
  padding-left: 300px;
  box-sizing: border-box;
  box-shadow: inset -350px 0 100px 0 #FFF;
}

<div>
  <h1>Title</h1>
  <p>Paragraph</p>
  <a>Link</a>
</div>

2。使用具有线性渐变的多个背景图像

浏览器兼容性：IE 9 + for multiple background images / IE 10 + for CSS linear gradients（IE 9 可以支持 IE 渐变滤镜或部分透明的.png）

容器 div 被赋予一个线性渐变背景，后跟图像背景（用逗号分隔）
div 被赋予左填充以使其文本与背景的白色部分对齐（@987654326@ 进入宽度）

渐变示例

div {
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 1) 240px, rgba(255, 255, 255, 1) 290px), url(https://i.stack.imgur.com/AF4np.jpg) no-repeat;
  height: 500px;
  width: 500px;
  border: solid 1px #000;
  padding-left: 250px;
  box-sizing: border-box;
}

<div>
  <h1>Title</h1>
  <p>Paragraph</p>
  <a>Link</a>
</div>

【讨论】：

不再起作用，图片在淡入淡出效果（chrome，edge）前显示
@EgonStetmann。我觉得他们俩都很好？我修复了示例中损坏的 CSS 背景图像；也许这引起了混乱。
哦，对于渐变示例，您需要确保图像在背景值中排在第二位。值中的第一个背景（在本例中为渐变）将与第二个（在本例中为图像）重叠，然后第二个将与第三个背景重叠，等等。