淡入背景而不是前景

我在背景圖像動態設定<div>：

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

和控制器：

$scope.hero = "path/to/image.jpg";

的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; 
}

我也有對淡入一些CSS：

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

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

，但我不知道如何拼湊一起，以便只有背景消失，而不是前臺即h1和h2

來源

2016-04-11 tommyd456

順便說一句，你應該將其標記HTML和CSS。這與AngularJS沒有什麼關係。 – sniels

這是Angular，因爲我想知道如何將漸變應用於ng-class – tommyd456

當然，您正在使用angular並使用角度方式來應用CSS。儘管問題本身歸結爲純HTML和CSS。 – sniels

如果您將不透明度設置爲元素，則它將對所有孩子生效。防止它在您的標題上生效的唯一方法是不要讓它成爲具有不透明度的元素的後代。這是您可以嘗試解決它的一種方法。

#hero #background { 
 
    background: #000; 
 
    height: 150px; 
 
    opacity: 0.5; 
 
} 
 
#hero h1, #hero h2 { 
 
    text-align: center; 
 
    margin-top: -80px; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
    <div id="hero"> 
 
    <div id="background"> 
 
     
 
    </div> 
 
    <h1>Title</h1> 
 
    <h2>Subtitle</h2> 
 
    </div> 
 
</body> 
 
</html>

來源

2016-04-11 19:58:25 sniels

淡入背景而不是前景

回答

相關問題