如何使不透明度逐渐扩大

Question

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

无论如何，我可以将imgCover的不透明度设为最左边的0.0，然后是最右边的1.0？

jsfiddle

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用linear gradient代替background-color：

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;