无法在离子卡 ionic 4 上设置完整的背景图像答案

【问题标题】：Unable to set full background image on ion-card ionic 4无法在离子卡 ionic 4 上设置完整的背景图像
【发布时间】：2019-11-06 19:17:35
【问题描述】：

我正在尝试设置离子卡的背景图像，它将完全覆盖卡的区域，但是每当我添加背景图像时，它并没有覆盖它的整个区域，而是离开了角落。我的代码是

   <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;

               }

【问题讨论】：

标签： css angular ionic-framework ionic4

【解决方案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

【讨论】：

【解决方案2】：

简单：您需要指向自己的组件来定义样式设置。

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

在调用 URL 参数时，您的背景图像可能会遇到一些问题。如果您遇到问题，要解决此问题，请访问此链接：

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

【讨论】：

【解决方案3】：

那是因为 ion card 周围默认有 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;
}

这是demo。

【讨论】：