Image Right Edge Fade / Blur CSS

Question

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

Answer 1

两种方法

让我们这样做：

1。使用box-shadow

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

• 在div中放置适当的box-shadow插页

• div被赋予左边距以将其文本与背景的白色部分对齐（box-sizing: border-box essentially absorbs the padding进入宽度）

Box-shadow示例

div {
  background: url(http://lorempixel.com/output/food-q-c-500-500-8.jpg) no-repeat;
  height: 500px;
  width: 500px;
  border: solid 1px #000;
  padding-left: 300px;
  box-sizing: border-box;
  box-shadow: inset -250px 0 50px 10px #FFF;
}

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

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

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

• 容器div具有线性渐变背景，后跟图像背景（以逗号分隔）

• div被赋予左边距以将其文本与背景的白色部分对齐（box-sizing: border-box essentially absorbs the padding进入宽度）

渐变示例

.png

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(http://lorempixel.com/output/animals-q-g-500-500-9.jpg) no-repeat;
  height: 500px;
  width: 500px;
  border: solid 1px #000;
  padding-left: 250px;
  box-sizing: border-box;
}

Answer 2

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

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

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