因为在父对象上设置不透明度，所有查尔兹也会受到影响，但是在当前的布局示例中，您可以只设置背景不透明度。这是修改后的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%不透明度。
另外，如果你有其他元素，你想给予不透明度，你必须添加选择器为那些以及在悬停选择器。

How to make a radial gradient with transparency in css
我发现了这个，看起来你可以使用RGBA的梯度颜色。如果你的背景包含透明度，你应该能够移除不透明度。

在不透明度为0的按钮下创建新的空div。在悬停状态下，使其达到0.5
我认为你的方法不会工作，因为CSS的级联性质。