Axure技巧：矩形框的透明度與填充色的透明度

摘要： 本文主要說明為什麼通常情況下在Axure中使用命令Set Opacity改變一個矩形的透明度為20%，矩形框的透明度卻不是想要的效果；以及如何解決這個問題。 通常情況下，如何給一個矩形框設定透明度呢？ 我的習慣是：為矩形框填充一個顏色，併為顏色設定透明度。 通常情況下，這...

本文主要說明為什麼通常情況下在Axure中使用命令Set Opacity改變一個矩形的透明度為20%，矩形框的透明度卻不是想要的效果；以及如何解決這個問題。

通常情況下，如何給一個矩形框設定透明度呢？

我的習慣是：為矩形框填充一個顏色，併為顏色設定透明度。

通常情況下，這個都是OK的，但是在下面這種情況下，就出現問題了。

遇到問題

前提：矩形框填充任意顏色，並設定 填充顏色的透明度 為50%

在使用命令Set Opacity改變一個矩形的透明度時候，發現兩個問題：

1. 通過命令【Set Opacity】設定矩形框的透明度為100%，無效；
2. 通過命令【Set Opacity】設定矩形框的透明度為20%，發現設定後的20%並不是期望中得到的20%。

執行點選後，結果沒有得到想要的效果，如下：

解決問題

前提：矩形框填充任意顏色，設定 矩形框透明度 （之前設定是矩形框填充顏色的透明度為50%）為50%：

1. 設定矩形框的透明度為100%；
2. 設定矩形框的透明度為20%。

執行點選後，最終得到想要的結果，如下：

通過這次的執行，得到了想要的效果。

到底是哪裡的問題導致這個結果的差異呢？

問題的原因

1. 矩形框的填充色的Opacity（Fill Color中設定）與矩形框本身的Opacity（控制元件的STYLE中設定）這是兩個不同屬性；
2. 【Set Opacity】命令設定的是矩形框本身的Opacity而不是填充色的Opacity。

總結

這只是一個非常非常小的知識點，希望能夠對你有所幫助。

本文由 @awai827 原創釋出於人人都是產品經理。未經許可，禁止轉載

題圖來自 Pexels ，基於 CC0 協議