如何淡出图像的两侧？

Question

当您扩大浏览器时，您会注意到图像的右侧和左侧以黑色淡出。

我需要将相同的功能应用到我的画廊，但不知道。我也发现了这个>>link，但它只是一条水平线，不知道如何将其附加到图像的两侧并产生与链接相同的结果。

在评论中，ultranaut 提到我可以在图像上应用滤镜。不过，问题是如果我在图像上使用它如何调整大小，因为浏览器窗口可能有不同的大小，并且图片侧应该可以根据每个浏览器大小进行调整。

Answer 1

这是给这只猫剥皮的一种方法：

.frame {
  width: 315px;
  height: 165px;
  margin: 20px;
  position: relative;
}

.fade {
  height: 100%;
  width: 100%;
  position: absolute;
  background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.65) 100%);
}

<div class="frame">
  <div class="fade"></div>
  <img src="picture.jpg" alt="" />
</div>

就我个人而言，我不太喜欢（语义上）不必要的

fade

div，而且我确信可能有一种更聪明的方法可以在没有它的情况下达到相同的效果，但它会起作用。

我只包含了 webkit 前缀规则，如果你想获得合法性，你需要添加其他供应商前缀。

小提琴在这里。

更新： 如果图像仅用作背景（就像链接示例中的情况一样），则可以在包含元素的 css 上设置渐变和图像：

.frame {
  width: 315px;
  height: 165px;
  margin: 20px;
  background-image: url(picture.jpg);
  background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.9) 100%), url(picture.jpg);
}

<div class="frame">
  Content...
</div>

更少混乱，更少大惊小怪：新式小提琴带有供应商前缀和一切。

Answer 2

仅使用 CSS3，尝试 Vignette。

逐字代码：

HTML：

<p class="vignette"><img src="image.jpg"></p>

CSS：

p.vignette {
  position: relative;
}
p.vignette img {
 display: block;
}
p.vignette:after {
 -moz-box-shadow: inset 0 0 10em #666;  
 -webkit-box-shadow: inset 0 0 10em #666;   
 box-shadow: inset 0 0 10em #666;
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 2;
 content: "";
}