Не удалось добиться правильной непрозрачности с помощью градиента Qml

У меня есть прямоугольник белого цвета, верх и низ которого должны иметь непрозрачность 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"}
   }
}

qt qml gradient
person transponster    schedule 30.10.2020    source источник
comment
Этот код отлично работает для меня. Какую проблему вы видите?   -  person JarMan    schedule 30.10.2020
comment
Код работает нормально. Но кажется, что разницы в цвете по всему прямоугольнику нет. Мне нужно иметь 20% непрозрачность сверху и снизу.   -  person transponster    schedule 30.10.2020
comment
Я вижу прозрачность, когда помещаю его поверх зеленого прямоугольника. Это работает нормально.   -  person JarMan    schedule 30.10.2020
comment
Но мой фон белый. Так что особой видимой разницы нет. Что делать в этом случае?   -  person transponster    schedule 30.10.2020
comment
Итак, вы пытаетесь нарисовать белый прямоугольник поверх белого фона? Тогда это работает. Прозрачность просто показывает белый фон. Что вы ожидаете увидеть вместо этого?   -  person JarMan    schedule 30.10.2020
comment
Хорошо, я понимаю твою точку зрения. Позвольте мне отредактировать мой вопрос, добавив изображение.   -  person transponster    schedule 30.10.2020

Ответы (1)


arrow_upward
0
arrow_downward

Основываясь на вашем редактировании, я думаю, что ваш градиент обратный. Вам нужна непрозрачность 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"}
   }
}
person JarMan    schedule 30.10.2020
comment
Как стало понятно из ваших предыдущих комментариев, это все равно не будет работать на белом фоне, верно? - person transponster; 30.10.2020
comment
Он будет работать с белым фоном, если ваш текст находится между ними. - person JarMan; 30.10.2020