javascript - 如何使不透明度逐渐缩放

Question

我有一个 div，imgCover 与图像重叠。 imgCover 的背景设置为 rgba(255,255,255,.7)，但我希望不透明度从 0.0 逐渐变为 1.0。

有没有办法让 imgCover 的不透明度在最左边为 0.0，然后在最右边为 1.0？

jsfiddle

#conveyorSec {
	padding: 50px 0;
	height: auto;
	width: 100%;
}
#conveyorInner {
	margin: 0 5%;
	width: 90%;
	height: 100%;
	position: relative;
}
#conveyorInner img {
	width: 100%;
	height: auto;
}
#imgCover {
	width: 40%;
	height: 100%;
	position: absolute;
	background-color: rgba(255,255,255,.7);
	right: 0;
	top: 0;
	z-index: 99;
}

<section id="conveyorSec">
			<div id="conveyorInner">
				<img src="https://media.istockphoto.com/photos/plant-growing-picture-id510222832?k=6&m=510222832&s=612x612&w=0&h=Pzjkj2hf9IZiLAiXcgVE1FbCNFVmKzhdcT98dcHSdSk=" alt="image">
				<div id="imgCover"></div>
			</div>
		</section>

Answer 1

使用linear gradient而不是 background-color:

background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1)); 

#conveyorSec {
	padding: 50px 0;
	height: auto;
	width: 100%;
}
#conveyorInner {
	margin: 0 5%;
	width: 90%;
	height: 100%;
	position: relative;
}
#conveyorInner img {
	width: 100%;
	height: auto;
}
#imgCover {
	width: 40%;
	height: 100%;
	position: absolute;
	background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,1));
	right: 0;
	top: 0;
	z-index: 99;
}

<section id="conveyorSec">
  <div id="conveyorInner">
    <img src="https://media.istockphoto.com/photos/plant-growing-picture-id510222832?k=6&m=510222832&s=612x612&w=0&h=Pzjkj2hf9IZiLAiXcgVE1FbCNFVmKzhdcT98dcHSdSk=" alt="image">
    <div id="imgCover"></div>
  </div>
</section>