jquery - 需要对图像的两侧应用 alpha 渐变

Question

我正在尝试使用 jQuery 或 CSS(当然也可以同时使用这两者)来混合图像。给定以下 HTML，有什么方法可以做到这一点吗？我找到了一些选项，但它们似乎需要固定宽度，我不会有固定宽度，因为这些图像是动态驱动的。

<div class="sevencol last">
    <img class="rotator_image" alt="This is an image." src="/photo.jpg">
</div>

我的想法是这样的:

Answer 1

这是一种使用 alpha 渐变而不是白色渐变的解决方案。
这个想法是用图像掩盖渐变。在 Win 上使用 Chrome 43 进行测试。其他浏览器可能需要 SVG 回退。
caniuse css-masks?

header {
  font-size: 2em;
  position: relative;
  top: 2em;
  background-color: red;
}


img {
  width: 100%;
  -webkit-mask-image:
      -webkit-gradient(linear, left center, right center,
          color-stop(0, transparent),
          color-stop(.10, rgba(0,0,0,.5)),
          color-stop(.25, black),
          color-stop(.75, black),
          color-stop(.90, rgba(0,0,0,.5)),
          color-stop(1, transparent));
}

<header>You can see the background through<br>the image gradient</header>

<img src="http://usiter.com/uploads/20131007/+priroda+more+voda+volna+5955363973.jpg" />