Angularjs 淡入背景而非前景

我正在尝试让背景图像淡入

我有一个

，背景图像是动态设置的：

<div id="hero" ng-style="{'background-image': 'url(' + hero + ')'}">
    <h1>{{property.name}}</h1><br>
    <h2>{{property.location}}</h2>
</div>

css是：

#hero {
    height:350px;
    background-repeat:no-repeat;
    background-position: center;
    background-size: cover;
    padding:30px;
}

#hero h1 {
    color:#EFEFEF;
    font-size:30px;
    background-color: #232323;
    display:inline-block;
    padding:10px 5px;
    margin-bottom:3px;
}

#hero h2 {
    color:#EFEFEF;
    font-size:15px;
    background-color: #232323;
    display:inline-block;
    padding:3px;
}

我还为fadein提供了一些css：

.fadein.ng-hide-remove {
    animation: 0.8s appear;
    display: block!important;
}

.fadein.ng-hide-remove.ng-hide-remove-active {
    opacity:1;
}

---

但我不知道如何将其拼接在一起，以便只有背景淡入，而不是前景，即

h1

和

h2

如果将不透明度设置为元素，它将对所有子元素生效。 防止它对标题生效的唯一方法是不要让它成为不透明度元素的后代。 这是你可以尝试绕过它的一种方法

#英雄#背景{
背景：#000；
高度：150像素；
不透明度：0.5；
}
#英雄h1，英雄h2{
文本对齐：居中；
利润上限：-80px；
}

JS-Bin
标题
字幕

btw，您应该将其标记为html和css。它与AngularJS没有真正的关系。它是有角度的，因为我想知道如何将淡入应用到ng类。确保您使用的是角度的，并且使用角度的方式来应用CSS。虽然问题本身归结为纯HTML和CSS。

.fadein.ng-hide-remove {
    animation: 0.8s appear;
    display: block!important;
}

.fadein.ng-hide-remove.ng-hide-remove-active {
    opacity:1;
}