Question

我试图在这里实现的是具有渐变的不透明度，以便在我滚动时元素逐渐不可见。

可以在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)));

但它似乎不起作用。

无论如何我能做到这一点吗？

P.S。问题回答

我有一个问题：当我滚动时，是否有可能使内容变得不可见或至少具有不透明度值，以便它们逐渐变得不可见？

Answer 1

这是截图的基本示例。

.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>

Answer 2

我真的不明白这个问题，我的意思是，当我滚动时，它是什么意思？无论如何，这里是svg：https://jsfiddle.net/n2u8q3wv/1/

的渐变

var amt = parseFloat($(this).closest('tr').find('.amont').text()).toFixed(2);
//        ^-------P should be lowercase p

是否有可能没有颜色的渐变不透明度？

2 个答案: