我無法阻止& quot不透明度& quot父div被子div繼承的狀態。

在這段代碼中，我希望不透明度不會影響元素按鈕。在我的原始代碼中，我使用& quot徑向梯度所以我沒有必要的知識來使用RGB解決方案修改代碼，:在偽元素或& quot位置:相對& quot解決方案。 我將非常感謝任何能幫助我的人。

我附上一個示例代碼 Stackblitz中的代碼示例

因為把不透明放在父對象上，所有的子對象都會受到影響，但是在當前的布局例子中，你可以只做一個背景不透明。這是修改后的css。來自您的stackblitz示例:

.product-item {
  .product-item-content {
    border: 1px solid var(--surface-d);
    border-radius: 3px;
    margin: 0.3rem;
    text-align: center;
    padding: 2rem 0;
    background: transparent
      radial-gradient(circle at left bottom, #009eea 0%, #004186 100%);
    
    color: white;
    cursor: pointer;
    &:hover{
      background: transparent
      radial-gradient(circle at left bottom, #009eea80 0%, #00418680 100%);
    }
  }

  .product-image {
    width: 50%;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  }
}

請注意，80 after you顏色代表50%的不透明度。

此外，如果你有其他元素，你想給不透明，你必須添加選擇器，以及在懸停選擇器。

在不透明度為0的按鈕下創建新的空div。 懸停時設為0.5

我認為你的方法是行不通的，因為CSS的層疊性質。

如何在css中制作帶透明度的徑向漸變

我發現了這個，看起來你可以用RGBA來做漸變色。如果你的背景包含透明，你應該能夠消除不透明。