Question

我想了解this ion-card background image的工作原理。他们有这样的html：

<ion-content class="card-background-page">

  <ion-card>
    <img src="img/card-saopaolo.png"/>
    <div class="card-title">São Paulo</div>
    <div class="card-subtitle">41 Listings</div>
  </ion-card>
...

然后只需设置sass：

.card-background-page {

  ion-card {
    position: relative;
    text-align: center;
  }

  .card-title {
    position: absolute;
    top: 36%;
    font-size: 2.0em;
    width: 100%;
    font-weight: bold;
    color: #fff;
  }

  .card-subtitle {
    font-size: 1.0em;
    position: absolute;
    top: 52%;
    width: 100%;
    color: #fff;
  }

}

没有z-index，<img src="img/card-saopaolo.png"/>如何神奇地成为背景？它是sass处理的东西吗？或者其他我以前从未学过的东西？

Answer 1

card-title和card-subtitle只是放在position: absolute的图片顶部，而且不需要z-index。

Answer 2

岩石寒岩岩石寒意效果

1首歌曲

.headerWelcomeTile {
  margin: 0px 0px 0px 0px !important;
  width: 100% !important;
  height: 35%;
  position: relative;
  text-align: center;
}

.headerWelcomeTileSub {
  margin: 30px 35px 0px 20px;
  background: black !important;
}

.headerSubDiv {
  position: absolute;
  margin: 0px 0px 0px 15px !important;
  height: 70%;
  position: relative;
  text-align: center;
  width: 75%;
}

<ion-card class="cardBackColor card card-md headerWelcomeTile">
    <div style="height: 20%;">
        <img class="imag-height" src="https://trunkitmusic.com/assets/music/RM/PRG/The%20Family%20Cheese/The%20Family%20Cheese%20LP/album.jpg">
    </div>
    <ion-card-content class="cardSubBackColor card-content card-content-md headerSubDiv " text-wrap="">
        <ion-row class="row">
            <ion-col class="col" col-4="">
                <img style="height: 80px;width: 80px;" src="https://trunkitmusic.com/assets/music/PP/IND/Trance Effect/artist.jpg">
            </ion-col>
            <ion-col class="col">
                <ion-segment class="segment segment-ios ng-untouched ng-pristine ng-valid segment-md">
                    <ion-segment-button aria-pressed="true" class="segment-button segment-button" role="button" tappable="" value="Paid">
                        Rock
                        <div class="button-effect"></div>
                        <div class="button-effect"></div>
                    </ion-segment-button>
                    <ion-segment-button aria-pressed="false" class="segment-button segment-button" role="button" tappable="" value="Free">
                        Chill Rock
                        <div class="button-effect"></div>
                        <div class="button-effect"></div>
                    </ion-segment-button>
                    <ion-segment-button aria-pressed="false" class="segment-button segment-button" role="button" tappable="" value="Top">
                        Rock Chill
                        <div class="button-effect"></div>
                        <div class="button-effect"></div>
                    </ion-segment-button>
                </ion-segment>
                <div class="artisName">
                    <img src="assets/img/user-music.png" style="width:10px;">
                    <p class="small-text white uperSpaceArtisName">Trance Effect</p>
                </div>
                <p class="very-small-text lightGrey">1 Songs</p>
            </ion-col>
        </ion-row>
        <!--template bindings={}-->
    </ion-card-content>
</ion-card>

ionic2 - 离子卡与背景图像

2 个答案: