html - CSS - 如何使用 CSS 模糊图像的左侧和右侧

Question

我正在尝试在整页图像的左侧和右侧创建模糊效果，但我不知道该怎么做。我想要实现的一个例子是here。 http://www.uchicago.edu/ .

我希望它们看起来像这样。

Answer 1

你可以这样做。试验左右的不透明度值和颜色。

.container {
  position: relative;
  display: inline-block;
}

.left, .right {
  position: absolute;
  width: 50px;
  top: 0;
  bottom: 0;
  background: white;
  opacity: 0.5;
}

.right {
  right: 0;
}

<div class="container">
  <div class="left"></div>
  <img src="http://placekitten.com.s3.amazonaws.com/homepage-samples/408/287.jpg" alt="" />
  <div class="right"></div>
</div>