从this question开始,我就可以获得以下代码了。
然而,这并不完全像我想要的那样。我希望它能尽快淡出。经过一些研究后,gradient
(和webkit-gradient
)似乎已被linear-gradient
取代。我尝试使用它,但它似乎不适用于mask-image
。
那么,如何通过特定的停止使图像淡出?例如0%不透明度为0%,。25不透明度为75%,0.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>
答案 0 :(得分:0)
linear-gradient()
会做
img {
position: absolute;
z-index: 5;
top: 0; left: 0;
-webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0.5) 75%, transparent);
mask-image: linear-gradient(rgba(0, 0, 0, 1) 25%, rgba(0, 0, 0, 0.5) 75%, transparent);
}
#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>