如何从右到左淡出图像？

Question

我希望图像从右向左淡出。它应该会褪色，因为我们可以在其右侧 70% 处看到原始清晰视图，然后在左侧 30% 处开始逐渐淡出。

这就是我想要的样子：

这是我的代码：

#main_section {
  /*   border: 1px solid blue; */
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -ms-box-flex: 1;
  -o-box-flex: 1;
  margin-top: 20px;
  margin-bottom: 20px;
  padding: 20px;
}
#main_section li {
  margin-left: 5px;
  display: inline-block;
  font-family: Euphemia;
  font-weight: bold;
  color: green;
}
.style_number {
  font: italic 1.2em Georgia, Times, serif;
  font-weight: bold;
  color: #4169E1;
}
#img1::before {
  background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
  background-image: -moz-linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
  background-image: -ms-linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
  background-image: -o-linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
  background-image: -webkit-linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
  content: "\00a0";
  height: 50%;
  position: absolute;
  width: 50%;
}
#img1 {
  float: right;
}

<section id="main_section">
  <marquee behavior="alternate">We are coming soon, please check back later.</marquee>

  <img src="img_ak/image_1st_body.jpg" id="img1" width="650" height="300" alt="" />
  <ol>
    <li>
      <span class="style_number">1.</span> INKOMSTDEKLARATION
      <br /><br /><br />
      <span class="style_number">2.</span> MOMSDEKLARATION
      <br /><br /><br />
      <span class="style_number">3.</span> BOLAGSBILDNING
      <br /><br /><br />
      <span class="style_number">4.</span> EKONOMI KONSLUT
      <br /><br /><br />
      <span class="style_number">5.</span> LÖPANDE BÖKFÖRING
    </li>
    <li>
      &nbsp;&nbsp;<span class="style_number">6.</span> BOKSLUT & ÅRSREDOVISNING
      <br /><br /><br />&nbsp;&nbsp;
      <span class="style_number">7.</span> SKATTEDEKLARATION
      <br /><br /><br />&nbsp;&nbsp;
      <span class="style_number">8.</span> LÖNEADMINISTRATION
      <br /><br /><br />&nbsp;&nbsp;
      <span class="style_number">9.</span> FAKTURERING
      <br /><br /><br />&nbsp;&nbsp;
      <span class="style_number">10.</span> ONE MORE
    </li>
  </ol>

</section>

Answer 1

问题是img标签不能有:before或:after伪元素，因为image是没有内容的标签（这就是为什么它是自闭标签<img />）。

您可以简单地用 div 包装图像并将渐变样式应用于其:before：

.img-wrap {
    position: relative;
} 
.img-wrap::before {
    background-image: -webkit-linear-gradient(to left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    ...
}

HTML：

<div class="img-wrap">
    <img src="img_ak/image_1st_body.jpg" id="img1" width="650" height="300" alt=""/>
</div>

演示：http://jsfiddle.net/xwcb7x05/1/

Answer 2

使用linear-gradient：

.FadeAway {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: transparent;
  background: linear-gradient(right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
  background: -moz-linear-gradient(right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
  background: -ms-linear-gradient(right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
  background: -o-linear-gradient(right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 100%);
  -ms-filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#550000FF, endColorstr=#550000FF);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff, endColorstr=#ffffffff);
}
.content {
  position: absolute;
  top: 0px;
  left: 0px;
  width:100%;
  height: 100%;
  background: url('http://phillipspet.com/wp-content/uploads/2014/08/blackcat.jpg') no-repeat;
}

<div class="content"></div>
<div class="FadeAway"></div>

上面的代码将在尽可能多的浏览器上运行，包括 IE（9 之前的版本）