無法在離子卡離子4上設置完整的背景圖像

Question

我試圖設置一個完全覆蓋卡區域的離子卡的背景圖像但是每當我添加背景圖像時它都不會覆蓋它的整個區域但它離開了角落。我的代碼是

   <ion-card class="design" style="width : 43%;height: 35%;">
   </ion-card>

    Scss Code
    .design  {
     background-image: url(../../assets/icon/rectangleCopy25@3x.png);
     background-size: cover;
     display: inline-block;

               }

Answer 1

試試這個，

#design{
            background-size: 100%;
            background-repeat: no-repeat!important;
            background-size: cover!important;
            width: 105vw!important;
            height: 100vh!important;
            margin-left: -10%!important;
            background-attachment: fixed!important;
            margin-top: -10%!important;
            background-position: center center!important;
          }

DEMO

Answer 2

簡單：您需要指定自己的組件來定義樣式設置。

ion-card {
     background-image: url('assets / 35.jpg');
     background-size: cover;
     (...)
}

調用URL參數時，您的背景圖像可能會遇到一些問題。 如果您妨礙了解決此問題，請轉到此鏈接：

https://github.com/vuejs/vue-loader/issues/481

Answer 3

那是因為離子卡的默認余量為10px左右。

您可以通過為.card-md類提供自己的樣式來覆蓋原始CSS

.design  {
  background-image: url(.....);
  background-size: cover;
  display: inline-block;
}

.card-md {
  margin: 0;
}

但是，我建議您將background-position為center 。

.design  {
  background-image: url(...);
  background-size: cover;
  background-position: center;
}

這是一個演示 。