需要将alpha渐变应用于图像的两侧

Question

我尝试使用jQuery或CSS（或两者兼而有之）来混合图像。鉴于以下HTML，有没有办法做到这一点？我找到了一些选项，但它们似乎需要一个固定的宽度，我不会因为这些图像是动态驱动的。

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

这样的事情就是我想到的：

Answer 1

使用:before或:after

表示渐变http://www.colorzilla.com/gradient-editor/

img{
    max-width: 100%;
}

div{
    position: relative;
    display: inline-block;
    vertical-align: top;    
}
div:before{
    content: '';
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(50%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%); /* IE10+ */
background: linear-gradient(to right, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 50%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 */    
}

<div class="sevencol last">
    <img class="" alt="This is an image." src="http://usiter.com/uploads/20131007/+priroda+more+voda+volna+5955363973.jpg" />
</div>

Answer 2

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

＆＃13;

＆＃13;

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

＆＃13;

<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" />

＆＃13;

＆＃13;

＆＃13;

Answer 3

<强> Gradient generator link

<强> Fiddle demo

＆＃13;

＆＃13;

.wrapper {
    position: relative;
    max-width: 100%;
    overflow: hidden;
}
.wrapper img {
    max-width: 100%;
}
.gradient {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;
    base64, PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNmZmZmZmYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(50%, rgba(255, 255, 255, 0)), color-stop(100%, rgba(255, 255, 255, 1)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%);
    /* IE10+ */
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 1) 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1);
    /* IE6-8 */
}

＆＃13;

<div class="wrapper">
  <img src="http://lorempixel.com/800/500/nature" />
  <div class="gradient"></div>
</div>

＆＃13;

＆＃13;

＆＃13;