我的目的是使用背景图像制作幻灯片，但是离子幻灯片中缺少背景图像。背景图像在其他页面中工作正常。以下是代码.......
typescript
import { Component } from '@angular/core';
import { ModalController, MenuController, NavController } from 'ionic- angular';
import { ViewController } from 'ionic-angular';
// import { RegistrationPage } from '../event-create/event-create';
import { LinkToRegistration } from '../about/about';
import { ModalPage } from '../modal/modal';
import { UserData } from '../../providers/user-data/user-data';
// import * as moment from 'moment';
// import * as firebase from 'firebase';
declare var firebase: any;
export interface Slide {
title: string;
description: string;
//image: string;
}
@Component({
templateUrl: 'tutorial.html'
})
export class TutorialPage {
slides: Slide[];
showSkip = true;
public time: any[] = [];
amp = "";
count = 0;
aseats = 0;
gathering = 0;
start = 0;
sfix ="";
date = 0;
constructor(public navCtrl: NavController, public menu: MenuController,
public modalCtrl: ModalController, public viewCtrl: ViewController, public userData: UserData) {
// this.navCtrl = navCtrl;
var db = firebase.database();
// var ref = db.ref("dcuser");
var time = db.ref("dcsession details");
// date and time==================
time.on("child_added", (snap)=>{
// this.count++;
// var active = db.ref('dcsession details/'+session+'/UserGroup);
console.log("added:", snap.key);
if(snap.val().SessionStatus == "Active")
{ var session = snap.key;
var active = db.ref('dcsession details/'+session+'/UserGroup');
// ===================================================testing
active.on('child_added', (spsnapshot) => {
if(spsnapshot.val().UserSessionStatus == "Active")
{
this.count++
}
}, function (errorObject) {
console.log("The read failed: " + errorObject.code);
});
// ==========================================================================testing
console.log("sessionid:"+session);
this.userData.setsession(session);
this.time.push({date: snap.val().Date, start: snap.val().StartingTime, aseats: snap.val().AllottedSeats });
this.aseats = snap.val().AllottedSeats;
this.gathering = snap.val().GatheringCount;
if(this.gathering == 1)
{
this.sfix = "st";
}else if(this.gathering == 2)
{
this.sfix = "nd";
}else if(this.gathering == 3)
{
this.sfix = "rd";
}else
{
this.sfix = "th";
}
this.date = snap.val().Date;
this.start = snap.val().StartingTime ;
// var hours = this.start.getHours() % 12 || 12; // 12h instead of 24h, with 12 instead of 0.
this.amp = this.start >= 12 ? 'PM' : 'AM';
console.log("hor"+this.start);
console.log("Date"+this.date);
console.log("ampm"+this.amp);
console.log("asets"+this.aseats);
}
console.log("time:",JSON.stringify(this.time));
});
// ==============================
this.slides = [
{
title: '<b></b>',
description: '<b> </b>',
// image: 'assets/img/ica-slidebox-img-1.png',
}
];
}
presentModal() {
let modal = this.modalCtrl.create(ModalPage);
modal.present();
}
dismiss() {
this.viewCtrl.dismiss();
}
startApp() {
console.log("btton click detected");
this.viewCtrl.dismiss();
this.navCtrl.push(LinkToRegistration);
}
onSlideChangeStart(slider) {
this.showSkip = !slider.isEnd;
}
ionViewDidEnter() {
// the root left menu should be disabled on the tutorial page
this.menu.enable(false);
}
ionViewWillLeave() {
// enable the root left menu when leaving the tutorial page
this.menu.enable(true);
}
}
// modal content
scss文件===========================================
.tutorial-page {
.toolbar-background {
background: #4795e2;
border-color: transparent;
}
.dcslide-img1{
//background: url('../../img/Slides_slide1_WOdots.svg');
// background-color: blue;
background: url('../assets/img/Slides_slide1_WOdots.svg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
.dcslide-img2{
//background: url('assets/img/Slides_slide2_wWOdots.svg');
background-color: blue;
background: url('../assets/img/Slides_slide2_wWOdots.svg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
.dcslide-img3{
// background: url('../../img/Slides_Slide3_WOdots.svg');
background-color: blue;
background: url('../assets/img/Slides_Slide3_WOdots.svg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
.dcslide-header-title{
font-size: 12px;
color:#a8d4ff;//#2975c0;
margin-top: 3px;
padding: 10px;
font-size: 14px;
text-align: left;
}
.dcslide-aloava-value{
font-size: 45px;
color: #ffffff;//#044a8e;
font-weight: bold;
}
.dcslide-aloava-text{
font-size: 15px;
color:#FFEB3B;//#2975c0;
text-transform: lowercase;
}
.dc-name{
text-align:center;
font-weight:bold;
margin-top: 40px;
color:#ffffff
}
.dc-name-p{
text-align:center;color:#003061;text-transform: lowercase;
}
.dcslide-badge{
font-size: 18px;
}
.dcslide-heart-icon{
color: #96ffa2;margin-right: 1px;margin-top: 5px; margin-bottom: 5px;
}
.dcslide-pepole-icon{
color: #ff4848;
margin-right: -1px;
margin-top: 0px;
margin-bottom: 2px;
font-size: 18px !important;
}
.card-header{
font-size: 18px;
text-align: left;
color: #fff;
}
.slide-zoom {
height: 100%;
}
.dc-count-panel{
background-color: #0A6BC8;//rgb(150, 203, 255);//rgba(255, 255, 255, 0.1);
}
.slide-title {
margin-top: 2.8rem;
}
.slide-image {
max-height: 50%;
max-width: 60%;
margin: 36px 0;
}
.image-holder {
display:inline-block;
position: relative;
}
.image-holder:after {
content:'';
top: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
opacity: 0.7;
display: block;
position: absolute;
background: linear-gradient(141deg, #0fb8ad 0%, #1fc8db 51%, #2cb5e8 75%);
}
.image-holder:hover:after {
opacity: 0;
}
//slide 2
.item-inner{
border-bottom: 0px solid #dedede;
}
ion-badge{
padding: 1px 5px !important;
background-color: #0a6bc8 !important;
color: #ffffff !important;
}
.hed-transparent{
background: transparent !important;
}
.swiper-container-horizontal > .swiper-pagination{
bottom: 50%;
left: 3px;
width: 0;
}
.join-monthly-btn{
margin: 0;
height: 5.6rem;
font-size: 2rem;
background-color: #044f78;
}
.dcslide-time{
font-size: 55px;
color: #ffffff;
}
.dcslide-ampm{
color: #96cbff;
}
.dcslide-date{
font-size: 18px;
margin-left: -10px;
color: #012548;
}
.fab-footer {
z-index: 99;
}
.button-dark{
color: #0a6bc8;
background-color: rgba(255, 255, 255, 0.65);
font-size: 1.4em;
}
.bar-footer {
//background: url(../../img/footer-wireframe.png) repeat-x;
height: 2px;
position: absolute;
right: 0;
bottom: 44px;
left: 0;
}
b {
font-weight: 500;
}
p {
padding: 0 40px;
font-size: 14px;
line-height: 1.5;
color: #60646B;
b {
color: #000000;
}
}
}
Html文件================================
<ion-header no-shadow>
</ion-header>
<ion-content>
<ion-slides [options]="{pager: true}" (ionWillChange)="onSlideChangeStart($event)">
<ion-slide class="dcslide-img1">
<ion-grid class="dc-count-panel">
<ion-row>
<ion-col width-26>
<div class="dcslide-header-title">
Creative's {{gathering}}{{sfix}} Monthly Gathering
</div>
</ion-col>
<ion-col width-35>
<div class="dcslide-aloava-value">{{aseats}}</div>
<div class="dcslide-aloava-text">Allocated Seats</div>
</ion-col>
<ion-col width-35>
<div class="dcslide-aloava-value animated infinite flash">{{ aseats-count }}</div>
<div class="dcslide-aloava-text">Available Seats</div>
</ion-col>
</ion-row>
</ion-grid>
<h3 class="dc-name">CREATIVES / </h3>
<p class="dc-name-p">
<ion-icon name="quote"></ion-icon>
WAS ESTABLISHED TO SPREAD AWARENESS ABOUT VARIOUS ARTS AND RAISE THE CEILING OF CREATIVITY AMONG CREATIVES IN .
<ion-icon name="quote"></ion-icon>
</p>
<button ion-button icon-only fab dark fab-bottom fab-center class="fab-footer" (click)="presentModal()">
<ion-icon name="finger-print" is-active="false"></ion-icon>
</button>
<div class="bar-footer"></div>
</ion-slide>
<ion-slide class="dcslide-img2">
<ion-item class="hed-transparent">
<ion-badge item-right>
<ion-icon name="people" class="dcslide-heart-icon" item-left></ion-icon>
{{ aseats-count }}/{{aseats}} </ion-badge>
</ion-item>
</ion-slide>
<ion-slide class="dcslide-img3">
<ion-item class="hed-transparent">
<ion-badge item-right>
<ion-icon name="people" class="dcslide-heart-icon" item-left></ion-icon>
{{ aseats-count }}/{{aseats}} </ion-badge>
</ion-item>
<br/><br/>
<div class="dcslide-time">{{start}}
<span class="dcslide-ampm">{{amp}}</span></div>
<div class="dcslide-date">{{date| date:'EEE, MMMM dd'}}</div>
<!--
<div class="dcslide-date">{{date| date:'EEE, MMMM dd'}}</div>-->
<ion-footer>
<button ion-button icon-right block (click)="startApp()" class="join-monthly-btn">
Join monthly gathering
<ion-icon name="arrow-forward"></ion-icon>
</button>
</ion-footer>
</ion-slide>
</ion-slides>
</ion-content>
答案 0 :(得分：0)
尝试在没有任何../的CSS中编写完整的img网址，并检查是否有助于恢复丢失的背景图片。
background: url('FULL URL');
答案 1 :(得分：0)
使用variables.scss下的背景图像路径创建一个变量，并在您想要使用的任何文件中使用该变量。
Variables.scss
$bg : "../assets/img/Slides_slide2_wWOdots.svg";
您的Scss文件
.dcslide-img1{
background: url($bg) no-repeat center center fixed;
}