点击按钮如何更改背景？ [英] How to change Background by clicking a button?

问题描述

我使用Ionic 3.
如何通过点击来改变我的背景图片？

I use Ionic 3. How to make my button change the image of my background by clicking?

这是我的按钮。

<button id="transparent" ion-button round color="light"> </button>

这是我的页面上已经安装的背景。

And this is the background that is already installed on my page.

 #back {
            background-size: 100%;
            background-repeat: no-repeat;
            background-size: cover;
            width: 105vw;
            height: 100vh;
            margin-left: -10%;
            background-attachment: fixed;
            margin-top: -10%;
            background-position: center center;
          }
          
          .ion-content {
            background: url('myurl');
          }

<div id="back" class="ion-content"> </div>

推荐答案

使用 [style.background] ：


（我创建了演示： https://stackblitz.com/edit/ionic-mgbhjq?file=pages%2Fhome%2Fhome.html ）

Use [style.background]:

(I created demo:https://stackblitz.com/edit/ionic-mgbhjq?file=pages%2Fhome%2Fhome.html)

<div id="back" class="ion-content" [style.background]="'url('+image+')'"></div>
<button id="transparent" ion-button round color="light" (click)="changeImage()"> </button>

TS（组件）

TS(component)

image:any;

ngOnInit(){
this.image ="your first url";
}

changeImage(){
this.image="your second url";
}

发表评论：

为我的第二个背景集成了一个ID

integrate an id for my second background

使用 attr.id ：

<div  attr.id="idParam" class="ion-content" [style.background]="'url('+image+')'"></div>

TS（组件）

TS(component)

image:any;
idParam:string="back";
ngOnInit(){
this.image ="your first url";
}

changeImage(){
this.image="your second url";
this.idParam="secondBack";
}

这篇关于点击按钮如何更改背景？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！