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 Pseudo-elements，就像在任何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中手动变暗图像：（。

希望这不是一个有角度的2 bug。

Answer 4

我不想选择不透明度/过滤器。

我认为将不透明度添加到支持大多数浏览器的背景图像的最佳方法如下：

使用具有100％高度和宽度以及最低z-index的img标签，并根据需要添加不透明度或其他css。使用img标签也可以为搜索引擎提供可见性。
如果我不想要搜索引擎可见性，那么我会使用多个背景。

background：background：rgba（255,255,255,0.37），url（'img / img.png'）;

angular2中的背景图像不透明度

4 个答案: