angular2中的背景图像不透明度

Question

我试图通过设置RGBA来改变背景图像的不透明度。但是，背景图像的不透明度不会改变。下面是我正在使用的代码片段。

以这种方式改变背景图像的不透明度在HTML中有效，但当我在angular2中尝试时就不起作用了。

import {Component} from 'angular2/core';

@Component({
    selector: 'my-app',
    styles: [`

.background-image {
  z-index: -1;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-color: rgba(0, 0, 0, 0.9);
},

`],
    template:
            `
            <h1>Hello Angular</h1>
              <div class="background-image" style="background-image : url('http://v4.pingendo.com/assets/photos/food/cover-1.jpg')">
              </div>
            `,
})
export class AppComponent { }

我只想说，感谢大家帮助解决了这个问题

Answer 1

尝试CSS图像不透明度/透明度，如

background-image {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

Answer 2

您可以使用CSS伪元素，就像在任何html中一样。这与Angular2无关。

Plunker

@Component({
    selector: 'my-app',
    styles: [`
        .background-image{
          position: absolute;
          top: 0px;
          left: 0px;
          width: 100%;
          height: 100%;
          z-index:-2;
        }
        .background-image:after {
          content: ' ';
          z-index: -1;
          top: 0px;
          left: 0px;
          width: 100%;
          height: 100%;
          position: absolute;
          background-size: cover;
          background-position: center;
          background-color: rgba(0, 0, 0, 0.2);
        },
    `],
    template:
          `
            <h1>Hello Angular</h1>
            <div class="background-image" style="background-image : url('http://v4.pingendo.com/assets/photos/food/cover-1.jpg')">
            </div>
          `,
})
export class AppComponent { }

Answer 3

为了结束线程，我最终不得不在Photoshop中手动将图像变暗:(.

希望这不是angular 2的bug。