无法使用渐变 Qml 实现正确的不透明度答案

【问题标题】：Unable to achieve right opacity with gradient Qml无法使用渐变 Qml 实现正确的不透明度
【发布时间】：2020-10-31 00:28:12
【问题描述】：

我有一个白色矩形，其顶部和底部的不透明度应为 20%，有点褪色的效果。我通过使用十六进制值尝试了渐变属性，尝试了 Qt.rgba() 但似乎没有效果。是我做错了什么还是有其他方法？一个最小的代码如下：

Rectangle{
   width: 400
   height: 400
   gradient: Gradient{
     GradientStop{ position : 0 ; color: "#33FFFFFF" } 
     GradientStop{ position : 0.4;color: "#FFFFFFFF"}
     GradientStop { position : 0.8 ; color: "#33FFFFFF"}
   }
}

【问题讨论】：

这段代码对我来说很好用。您遇到什么问题？
代码运行良好。但是整个矩形的颜色似乎没有区别。我需要在顶部和底部有 20% 的不透明度
当我把它放在一个绿色的矩形上时，我看到了透明度。它工作正常。
但我的背景是白色的。所以没有太大的明显差异。这种情况该怎么办？
所以你想在白色背景上画一个白色矩形？然后它正在工作。透明度只是通过显示白色背景。你希望看到什么？

标签： qt qml gradient

【解决方案1】：

根据您的编辑，我认为您的渐变是向后的。您希望中间的不透明度为 0，顶部和底部的不透明度为 100%。然后您想将该矩形用作文本顶部的叠加层。我会让它变成这样：

Rectangle{
   width: 400
   height: 400
   gradient: Gradient{
     GradientStop{ position : 0.0; color: "#FFFFFFFF" } 
     GradientStop{ position : 0.2; color: "#33FFFFFF" } 
     GradientStop{ position : 0.4; color: "#00FFFFFF"}
     GradientStop{ position : 0.6; color: "#00FFFFFF"}
     GradientStop{ position : 0.8; color: "#33FFFFFF"}
     GradientStop{ position : 1.0; color: "#FFFFFFFF"}
   }
}

【讨论】：

从您之前的 cmets 中了解到，这仍然无法在白色背景上工作，对吧？
如果您的文本在它们之间，它将适用于白色背景。