Question

我正在尝试将模糊样式添加到此vuetify.js“ v-card”中，我必须添加模糊，但是它也会模糊其内容，是否有一种方法可以模糊卡而不是内容？另外，我对自定义CSS还是很陌生，可以制作一种样式使v卡背景透明且模糊吗？

new Vue({
  el: '#app',
})

//Remove console info from Vue
Vue.config.devtools = false
Vue.config.productionTip = false

.blur {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.18/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.css">

<v-card id="app" color="rgb(0, 0, 0, 0.2)" width="354" height="100%">
  <v-layout justify-space-between column fill-height>
    <v-flex>
      <v-card-title primary-title>
        <h3 class="headline ma-1"></h3>
      </v-card-title>
      <v-card-text>
        <v-flex>testing</v-flex>
      </v-card-text>
    </v-flex>
    <v-flex style='height:100px'>
      <v-layout align-end row fill-height>
        <v-flex>
          <v-divider></v-divider>
          <v-card-actions>
            <v-btn color="blue darken-3" block>View Examples</v-btn>
          </v-card-actions>
        </v-flex>
      </v-layout>
    </v-flex>
  </v-layout>
</v-card>

编辑：我有摘要，并且有背景的透明度，但我不知道您将如何仅对V卡获得模糊效果（模糊样式有效）

Vuetify.js-向v卡添加模糊和透明样式

0 个答案: