css - 如何淡出图像的两侧？

Question

当您使浏览器变宽时，您会注意到图像的右侧和左侧逐渐变黑。

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

在评论中，ultranaut 提到我可以在图像上应用过滤器，但问题是如果我将它应用在图像上如何调整大小，因为浏览器窗口可能有不同的大小，图片侧应该是可调整的适用于各种浏览器尺寸。

Answer 1

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

HTML:

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

CSS:

.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%
    );
}

就个人而言，我不是(语义上)不必要的 fade div 的忠实拥护者，而且我确信没有它可能有更聪明的方法来实现相同的效果，但是它'会工作的。

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

fiddle here .

更新:如果图像只是用作背景——如您链接的示例中的情况——渐变和图像都可以在包含元素的 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>

少些困惑，少些大惊小怪:new-style fiddle带有供应商前缀和所有内容。