angular2中的背景图像不透明度

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

更改背景图像不透明度这种方式在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 { }

只想说感谢大家在帮助解决问题

来源

2016-04-14 MJDude

请尝试'：host .background-image {' –

感谢您回复我。我只是尝试：主机.background-image {代替.background-image {和结果是一样的。图像被加载，但不透明度没有改变。 – MJDude

我认为背景图像不受背景颜色属性的影响（因为图像通常有自己的颜色）。 – apokryfos

尝试CSS图片透明度/像透明度跳，

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

来源

2016-04-14 16:25:54

感谢@blasteralfred工作，但使图像更轻。我使用rbga的原因是为了使背景图像变暗。不透明度似乎使图像更轻。 – MJDude

只是收出螺纹，我最后不得不在Photoshop中手动变暗图像:(。

希望这不是一个有角度的2错误

来源

2016-04-14 19:02:01 MJDude

很难想象这是Angular相关的，即使你说它在HTML中工作。你可以创建一个允许重现的Plunker吗？ –

@GünterZöchbauer感谢您回复。这里是我的链接[link]（http://plnkr.co/edit/5HxQjQSAiXl5AUhty13w?p=preview）。看来Abdulrahman已经发布了一个解决方案。 – MJDude

我将它移出Angular组件，但它仍然不起作用http://plnkr.co/edit/3t2zWpMOoOjFG9YbQLXQ?p=preview。 –

您可以像使用任何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 { }

来源

2016-04-14 19:17:00 Abdulrahman

谢谢@Abdulrahman，我不确定你的解决方案为什么能起作用，而我的解决方案不起作用。这是链接到我的plunker [链接]（http://plnkr.co/edit/5HxQjQSAiXl5AUhty13w?p=preview） – MJDude

@MJDude当使用Pseudo'：after'时，就像在当前的后面添加另一个'div' 。新增加的是原来的一个。 '：之后'是z-索引：-1，而原始z-索引：-2。所以这将有助于将它们视为两个不同的div。上面的那个背景色是背景色的，而下面的背景色是背景图像 – Abdulrahman

@MJDude在你的运动器材中，背景色和背景图像在同一个div上。这将使背景图像高于背景颜色。 – Abdulrahman

我不想去不透明/过滤器。

我认为，把不透明度为支持大多数的浏览器是如下背景图像最好的方法：

使用具有100％的高度img标签和宽度与最低的z-index，并添加透明度或其他CSS无论你想要什么。使用img标签也可以让搜索引擎看到它。
如果我不想搜索引擎可见性，那么我使用多个背景。

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

来源

2016-05-11 04:47:58

angular2中的背景图像不透明度

回答

相关问题