mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
35 lines
646 B
HTML
35 lines
646 B
HTML
|
|
<ion-toolbar>
|
|
<ion-title>Blur</ion-title>
|
|
</ion-toolbar>
|
|
|
|
<ion-content>
|
|
<div class="blur-content">
|
|
<ion-card blur class="blur-card">
|
|
<ion-card-header>
|
|
Card
|
|
</ion-card-header>
|
|
<ion-card-content>
|
|
This card will blur the content behind it.
|
|
</ion-card-content>
|
|
</ion-card>
|
|
</div>
|
|
</ion-content>
|
|
|
|
<style>
|
|
.blur-content {
|
|
position: absolute;
|
|
text-align:center;
|
|
background: url('bg.jpg') no-repeat transparent;
|
|
background-size: cover;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.blur-card,
|
|
.blur-card ion-card-header {
|
|
background: transparent;
|
|
color: white;
|
|
}
|
|
</style>
|