Image Right Edge Fade/Blur CSS

Question

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

Answer 1

两种方法

让我们这样做:

1.使用box-shadow

浏览器兼容性: IE 9 +用于盒子阴影.

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

• div被赋予左边距以使其背景的白色部分与文本对齐(box-sizing: border-box基本上将填充吸收到宽度中)

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.使用具有线性渐变的多个背景图像

浏览器兼容性:IE 9 +用于多个背景图像/IE 10 +用于CSS线性渐变(IE 9可以支持IE渐变滤镜或部分透明.png)

• 容器div具有线性渐变背景,后跟图像背景(以逗号分隔)

• div被赋予左边距以使其背景的白色部分与文本对齐(box-sizing: border-box基本上将填充吸收到宽度中)

渐变的例子

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;
}

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