背景画像angacity2の不透明度

Question

RGBAを設定して、背景画像の不透明度を変更しようとしています。しかし、背景画像の不透明度は変化しません。以下は私が使用しているコードスニペットです。

このようにバックグラウンドイメージの不透明度を変更すると、HTMLで動作しますが、これをangle2で試してみると動作しません。

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 { } 

はちょうど私は、ただ、スレッドを閉じるために

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

Answer 1

てみCSSイメージ不透明度/透明にジャンプするためのみんなに感謝を言いたかったですPhotoshopで手動で画像を暗くする必要がありました。（

これは角2のバグではありません。

Answer 2

、同じような問題を解決する手助け

Answer 3

任意のhtmlのように、CSS疑似要素を使用できます。これは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 4

私は不透明度/フィルタのために行くことを好みません。

私は次のようにブラウザのほとんどをサポートして背景画像に不透明度を置くための最良の方法だと思います：最低のzインデックスを持つ100％の高さと幅でimgタグを使用して

1. と不透明度または他の追加あなたが欲しいものは何でもcss。 imgタグを使用すると、検索エンジンの可視性も向上します。

2. 私は検索エンジンの可視性を望まない場合は、複数の背景を使用します。

   背景：背景：rgba（255,255,255,037）、url（ 'img/img.png'）;