现在有一张图片 要使图片上半部分展示下半部分渐渐透明
background-image: -webkit-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background-image: -moz-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background-image: -o-linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
background-image: linear-gradient(top,rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
最近刚好用到
渐变不是有 颜色的层次分段嘛,你在下面用个 transparent试试撒 。我没用过,猜的!
opacity吗?
你问问题的方式有问题,不贴你的代码,不描述场景,我还是看别人的回答才理解了你的问题~~~
不过对这个问题比较感兴趣啦,就想到使用混合模式。
3.4.1. The mix-blend-mode property
The blend mode defines the formula that must be used to mix the >colors with the backdrop. This behavior is described in more detail in Blending.
来源:Compositing and Blending Level 1
我用的Codepen,不知道怎么贴了额。
.Test{
display: inline-block;
width: 366px;
height: 278px;
background-image: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1));
}
.Test img{
mix-blend-mode: overlay;
}
<div class="Test">
<img alt="" src="http://f.hiphotos.baidu.com/zhidao/wh%3D450%2C600/sign=34480776be0e7bec238f0be51a1e950e/b3fb43166d224f4a2ded606a0ff790529822d156.jpg">
</div>
Demo效果
自我感觉不错~