图像右边缘 Fade/Blur CSS

Question

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

Answer 1

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

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

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

Answer 2

两种方法

让我们做这个：

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(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。使用具有 linear-gradient

的多个背景图像

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

容器 div 被赋予 linear-gradient 背景，后跟图像背景（以逗号分隔）
div 被左填充以使其文本与背景的白色部分对齐（box-sizing: border-box essentially absorbs the padding 进入宽度）

渐变示例

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>

图像右边缘 Fade/Blur CSS

Image Right Edge Fade/Blur CSS

css

blur

fade

两种方法

1。使用 box-shadow

Box-shadow 例子

2。使用具有 linear-gradient

渐变示例