Фоновое изображение с размытым в том, чтобы не работать в vuetify x ant ⇐ CSS

[Anonymous]

Я пытаюсь добавить размытое фоновое изображение в карту муравья. заметил, что когда я добавляю контент в :: до , я вижу часть фонового изображения. Однако, даже когда я устанавливаю его позицию в Absolute и устанавливаю Top , внизу , левый и справа на ноль ( 0 ), он все еще не работает.
перед добавлением значения содержимого

Код: Выделить всё

Vue.use(antd);
new Vue({
el: '#app'
})< /code>
.my-card .ant-card-body{
position: relative;
overflow: hidden;
z-index: 1;
}
.my-card .ant-card-body::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: no-repeat url('https://cdn.vuetifyjs.com/images/parallax/material.jpg');
background-size: cover;
filter: blur(5px);
z-index: -1;
}
.my-card .ant-card-body .ant-card-meta-title{
font-family: 'Rocher', sans-serif;
font-size: 25px;
margin: 0;
padding: 0;
}
.my-card .ant-card-body .ant-card-meta-description{
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 20px;
}< /code>








My Title

My description

After adding content value

Код: Выделить всё

Vue.use(antd);
new Vue({
el: '#app'
})< /code>
.my-card .ant-card-body{
position: relative;
overflow: hidden;
z-index: 1;
}
.my-card .ant-card-body::before {
content: 'THIS IS JUST AN EXAMPLE TEXT FOR TESTING ONLY';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: no-repeat url('https://cdn.vuetifyjs.com/images/parallax/material.jpg');
background-size: cover;
filter: blur(5px);
z-index: -1;
}
.my-card .ant-card-body .ant-card-meta-title{
font-family: 'Rocher', sans-serif;
font-size: 25px;
margin: 0;
padding: 0;
}
.my-card .ant-card-body .ant-card-meta-description{
font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-size: 20px;
}< /code>








My Title

My description

, как вы видите в примере 2, где я добавляю ценность в контент, в классе стиля. My-Card .ant-Card-Body :: Перед , я делаю содержание: 'Это просто пример текста только для тестирования Знаешь, что мне здесь не хватает, так что есть идеи или предложения?

Подробнее здесь: https://stackoverflow.com/questions/797 ... tify-x-ant