从…起
this question
,我能够让下面的代码工作。
然而,这并不是我想要的。我希望它能尽快消失。经过一些研究,看起来
gradient
(和
webkit-gradient
)已替换为
linear-gradient
. 我试过用它,但它似乎不适用于
mask-image
.
那么,如何使图像在特定停止时淡出?例如,0%时不透明度为0。75%时不透明度为25。5 100%时的不透明度。(换言之,在图像的75%之前,你不会看到红色和蓝色条纹)
img {
position: absolute;
z-index: 5;
top: 0; left: 0;
-webkit-mask-image:
-webkit-gradient(
linear,
left top,
left bottom,
from(
rgba(0,0,0,1)
), to(
rgba(0,0,0,0)
)
)
}
#bg1 {
position: absolute;
left: 0; width: 50px;
height: 360px;
background-color: red;
}
#bg2 {
position: absolute;
left: 50px; width: 50px;
height: 360px;
background-color: blue;
}
<img src="http://www.gstatic.com/webp/gallery/1.jpg">
<div id="bg1"></div>
<div id="bg2"></div>
