如何从右到左淡出图像？

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伪元素，因为图像是没有内容的标签（这就是为什么它是自关闭标签<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/