离子 4 卡图像重叠答案

【问题标题】：Ionic 4 Card Image Overlap离子 4 卡图像重叠
【发布时间】：2019-10-10 21:25:03
【问题描述】：

如果在 Ionic 上可行，我正在寻找解决方案？我已经使用了 z-index，但什么也没发生。

HTML

<ion-card>
  <ion-card-content>
     <ion-img src="./assets/img/pizza-manager.png"></ion-img>
         </ion-card-content>
         <ion-card-header>
            sample
         </ion-card-header>
</ion-card>

CSS

ion-card {
  position: relative;
  height:30vh;
  width: 50vw;
  z-index: -1;
}

ion-card-content {
  height: 70%;
  z-index: -1;
}

ion-img {
  height: 20vh;
  width: auto;
  z-index: 2;
  position: absolute;
  margin-top: -50px;
}

我的结果：

Result

【问题讨论】：

标签： angular ionic-framework ionic4

【解决方案1】：

看起来溢出被隐藏了。

我删除了你的大部分代码，只是使用了溢出设置来获得你想要的东西：

//重叠-card.page.html

<ion-header>
  <ion-toolbar>
    <ion-title>overlapping-card</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <br>
  <br>
  <br>
  <br>
  <ion-card>
    <ion-card-content>
      <ion-img src="./assets/pizza.png"></ion-img>
    </ion-card-content>
    <ion-card-header>
      sample
    </ion-card-header>
  </ion-card>
</ion-content>

//重叠卡.page.scss

ion-card{
    height:30vh;
    width: 50vw;
    overflow: visible;    
}
ion-card-content{
    height: 70%;
    overflow: visible;    
}
ion-img{
    height: 20vh;
    width: auto;
    margin-top: -75px;
}

注意：没有ion-img 的高度我得到了一些奇怪的效果，所以你应该确保设置它。

【讨论】：

【解决方案2】：

请尝试此代码，这将帮助您解决问题。

ion-card.main-card{
  background: #D29034;
  border-radius: 4px 100px 10px 10px;
  max-width:500px;
  overflow: visible;
  margin-top: 80px;
}
.card-img{
  max-width:80px;
}
.card-main-content{
  background: #F3F0F1;
  border-radius: 4px 60px 10px 10px;
}
.card-amount{
  --background: transparent;
  --border-color: transparent;
  color: #fff;
}
.card-image-blk{
  --background: transparent;
  --border-color: transparent;
  margin-bottom: -30px;
  margin-top: -30px;
}

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@4.7.4/css/ionic.bundle.css" />
  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@4.7.4/dist/ionic/ionic.esm.js"></script>
  <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@4.7.4/dist/ionic/ionic.js"></script>
  <ion-app>
    <ion-content>
      <ion-card class="main-card">
        <ion-card-content class="card-main-content">
          <ion-item class="card-image-blk">
          <img class="card-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6e/Vector_cup_of_coffee.svg/1094px-Vector_cup_of_coffee.svg.png" slot="end" />
            </ion-item>
        <ion-card-header>
          <ion-card-title>Madison, WI</ion-card-title>
        </ion-card-header>
        <ion-card-content>
          Founded in 1829 on an isthmus between Lake Monona and Lake Mendota, Madison was named the capital of the Wisconsin Territory in 1836.
        </ion-card-content>
          </ion-card-content>
        <ion-card-content>
    <ion-item class="card-amount">
    <ion-label>Card Button Item 2</ion-label>
      <ion-icon name="walk" slot="end"></ion-icon>
  </ion-item>
  </ion-card-content>
      </ion-card>
    </ion-content>
  </ion-app>

【讨论】：

【解决方案3】：

page.html

<ion-card>
   <ion-card-header>
      sample
   </ion-card-header>
</ion-card>   

<ion-img src="../../assets/images/feature-bootstrap.png"></ion-img>

page.scss

ion-card{
    position: relative;
    height:250px;
    width: 250px;

ion-card-content{
    height: 70%;
    z-index: -1;
  }
}
ion-img{
    width: 200px;
    position: absolute;
    top: 0;
    right: -6px;
}

【讨论】：