我在这里想要实现的是具有像渐变这样的不透明度，以便当我滚动浏览时该元素逐渐不可见。
CSS有可能吗？
我已经试过了：
-webkit-mask-position: 0 0;
-webkit-mask-size: 200px 200px;
-webkit-mask-image: -webkit-gradient(linear, left top, right bottom,
color-stop(0.00, rgba(0,0,0,1)),
color-stop(0.45, rgba(0,0,0,1)),
color-stop(0.50, rgba(0,0,0,0)),
color-stop(0.55, rgba(0,0,0,0)),
color-stop(1.00, rgba(0,0,0,0)));
但它似乎不起作用。
反正我能做到这一点吗？
PS问题解决
我有一个问题：是否有可能使内容变得不可见或至少在我滚动时具有不透明度值，从而使它们逐渐变得不可见？
这是您的屏幕截图的基本示例。
.gradient{
text-align: center;
width: 200px;
height: 200px;
border: solid 1px #ccc;
position: relative;
background-color: #fff;
}
.gradient::after{
content:'';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0.65+0,0+100 */
background: -moz-linear-gradient(top, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(255,255,255,0.65) 0%,rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(255,255,255,0.65) 0%,rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}<div class="gradient">
<h5>Coming soon!</h5>
<h4>Coming soon!</h4>
<h3>Coming soon!</h3>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句