css - 使用 ngStyle 指定备用背景图像

Question

我正在尝试为 DIV 指定备用背景图像，如下所示：

<div [ngStyle]="{'background-image':'url(1.jpg), url(2.jpg)'}"></div>

两个图像都没有显示（如果我不指定备用图像，它会起作用）。

是否可以使用指定多个背景图像ngStyle？

标签： cssangular

Answer 1

工作演示

模板文件

  <div  [ngStyle]='styles'>
      <h1>Lorem Ipsum Dolor</h1>
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
      </div>

ts文件

 export class AppComponent  {

  name = 'Angular';
  img1 = 'https://www.w3schools.com/css/img_flwr.gif';
  img2 = 'https://www.w3schools.com/css/paper.gif'
  isSelected: boolean =  true;
  styles = {};


  setCurrentStyles() {
    this.styles = { 
        backgroundImage: this.isSelected ?
                        `url(${this.img1})`:`url(${this.img2})`
    };
  }

  toogleImage() {
    this.isSelected = !this.isSelected;
    this.setCurrentStyles();
  }
}