我想让 v-card 透明，但它不能正常工作答案

【问题标题】：I want to make v-card transparent, but it doesn't work right我想让 v-card 透明，但它不能正常工作
【发布时间】：2019-12-22 05:07:30
【问题描述】：

我希望 v-card 是透明的，但里面的东西不应该是透明的。如何使用 CSS 制作它？

card.vue

    <v-card class="cardColor">
      <v-card-text>
        TEXT
      </v-card-text>
      <v-card-actions>
        <v-btn color="primary" @click="foo">Button</v-btn>
      </v-card-actions>
    </v-card>

common.css

    .cardColor {
       background-color: white!important;
       border-color: transparent!important;
       opacity: 0.65;
     }

我试着写这个，但它不起作用。

    .cardColor {
       color: rgba(255, 255, 255, 0.5);
     }

【问题讨论】：

欢迎来到 Stack Overflow _ 我不知道 VueJS，但如果你想让背景透明，它看起来好像你的 CSS 中的元素以错误的方式出现了 _ background-color: white !important; 应该是透明的并且大概border-color: transparent !important; 应该是白色的
更改父元素的不透明度将始终影响其所有后代。从功能上讲，无法避免这种情况，因此您所描述的内容是不可能的。考虑提供对目标的解释，而不是您尝试的解决方案；也许是所需效果的屏幕截图或模型。您可以使用解决方法来实现它。
您需要自己覆盖v-card（背景、阴影等）上的 Vuetify css 定义。所以background: transparent; 和box-shadow: initial 等。不要添加不透明度，否则会影响一切。

标签： javascript css vue.js vuetify.js

【解决方案1】：

你可以使用带轮廓的颜色属性

<v-card outlined color="transparent">
   ...
</v-card>

【讨论】：

【解决方案2】：

我给卡片背景放了一个透明，去掉不透明，这是你需要的吗？

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})
setTimeout(()=>console.clear(), 100)

#app {
  background: linear-gradient(to right, rgba(226,226,226,1) 0%, rgba(254,254,254,1) 100%);
}
.cardColor {
   background-color: rgba(255, 255, 255, 0.5) !important;
   border-color: white !important;
 }

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

 <div id="app">
    <v-app>
      <v-content>
        <v-container>
          <v-card class="cardColor">
            <v-card-text>
              TEXT
            </v-card-text>
            <v-card-actions>
              <v-btn color="primary" @click="foo">Button</v-btn>
            </v-card-actions>
          </v-card>
        </v-container>
      </v-content>
    </v-app>
  </div>

【讨论】：

感谢您的回答，是的，我想要卡片透明，但不是 100% 透明，我认为 0.8 - 0.9 透明。
@Maks 我编辑了sn-p，只将背景颜色透明度改为你想要的值的rgba值，希望对你有帮助
非常感谢您的帮助，它完全符合我的要求。

【解决方案3】：

在 CSS 中，我们可以通过以下样式来实现：

.cardColor 
{ 
    z-index: 1; 
    position: relative; 
    width: 100%; 
    float: left; 
}

.cardColor:before 
{ 
    position: absolute; 
    content: ""; 
    display: block; 
    width: 100%; 
    height: 100%; 
    background: #fff; 
    opacity: 0.35; 
    top: 0; 
    left: 0; 
    z-index: -1; 
}

【讨论】：