html - css中如何使透明度渐变啊

问题描述

问 题

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

解决方案

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

这篇关于html - css中如何使透明度渐变啊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！