首页 > css中如何使透明度渐变啊

css中如何使透明度渐变啊

现在有一张图片 要使图片上半部分展示下半部分渐渐透明


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效果
自我感觉不错~

【热门文章】
【热门文章】