Je veux que la v-card soit transparente, mais ce qu'il y a à l'intérieur ne doit pas être transparent. Comment puis-je le faire avec CSS?
card.vue
.cardColor {
color: rgba(255, 255, 255, 0.5);
}
common.css
.cardColor {
background-color: white!important;
border-color: transparent!important;
opacity: 0.65;
}
J'ai essayé de écrivez ceci, mais cela ne fonctionne pas.
<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>
3 Réponses :
En CSS, nous pouvons y parvenir par le style suivant:
.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;
}
Je mets un transparent sur le fond de la carte et enlève l'opacité, c'est ce dont tu as besoin?
<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>
#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;
}
new Vue({
el: '#app',
vuetify: new Vuetify(),
})
setTimeout(()=>console.clear(), 100)
Merci pour la réponse, oui je voulais transparent pour carte, mais pas 100% transparent, je pense à 0.8 - 0.9 transparent.
@Maks J'ai modifié l'extrait de code, changez uniquement la transparence de la couleur d'arrière-plan en une valeur rgba avec la valeur souhaitée, j'espère que cela peut vous aider
Merci beaucoup pour votre aide, cela fonctionne exactement comme je le voulais.
vous pouvez utiliser la propriété de couleur avec le contour
<v-card outlined color="transparent"> ... </v-card>
Bienvenue dans Stack Overflow _ Je ne connais pas VueJS mais si vous voulez que l'arrière-plan soit transparent, il semble que vous ayez les éléments de votre CSS dans le mauvais sens _
background-color: white! Important; devrait être transparent et vraisemblablementborder-color: transparent! important;devrait être blancLa modification de l'opacité d'un élément parent affectera toujours tous ses descendants . Il n'y a aucun moyen de contourner cela, fonctionnellement, donc ce que vous décrivez n'est pas possible. Pensez à fournir une explication de l ' objectif par opposition à votre tentative de solution; peut-être une capture d'écran ou une maquette de l'effet souhaité. Vous pouvez probablement y parvenir en utilisant une solution de contournement.
Vous devez remplacer les définitions css Vuetify sur
v-card(arrière-plan, ombre, etc.) par les vôtres. Doncbackground: transparent;etbox-shadow: initialetc. N'ajoutez pas d'opacité ou cela affectera tout.