angular2中的背景图像不透明度

Question

I'm trying to change the opacity of a background image, by setting the RGBA. However the opacity of the background image does not change. Below is the code snippet i'm using with.

Changing the background image opacity this way works in HTML, but not when I try it with 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 { }

Just wanted to say thanks to everyone for jumping in an helping to solve the problem

Answer 1

Try CSS Image Opacity / Transparency like,

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

Answer 2

You could use CSS Pseudo-elements, as in any html. This is not related to 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

Just to close out the thread, I ended up having to manually darken the image in Photoshop :(.

Hopefully this isn't an angular 2 bug.

Answer 4

I prefer not to go for opacity/filter.

I think best way to put opacity to the background image which support most of the browser is as follows:

1. Using img tag with 100% height and width with lowest z-index and add opacity or other css whatever you want. Using img tag gives it visibility for search engine as well.

2. If I don't want search engine visibility then I use multiple background.

   background:background: rgba(255, 255, 255, 0.37),url('img/img.png');