fadein den Hintergrund, aber nicht in den Vordergrund

Ich versuche, ein Hintergrundbild zu erhalten in verblassenfadein den Hintergrund, aber nicht in den Vordergrund

Ich habe ein <div> wo das Hintergrundbild dynamisch festgelegt ist:

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

und Controller:

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

Die CSS ist:

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

ich einige CSS auch für die FadeIn haben:

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

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

aber ich bin nicht sicher, wie es Stück zusammen, so dass nur der Hintergrund verblasst in und nicht in den Vordergrund, dh die h1 und h2

Quelle

2016-04-11 tommyd456

btw, sollten Sie es HTML und CSS etikettieren. Es ist nicht wirklich mit AngularJS verwandt. – sniels

Es ist Angular, wie ich wissen möchte, wie man die Einblendung in die ng-Klasse anwendet. – tommyd456

Sicher, du benutzt angular und verwendest eckige Wege, um CSS anzuwenden. Obwohl das Problem selbst auf reines HTML und CSS zurückzuführen ist. – sniels

Wenn Sie die Deckkraft für ein Element festlegen, wirkt sich dies auf alle untergeordneten Elemente aus. Die einzige Möglichkeit, dies zu verhindern, ist, dass es kein Nachkomme eines Elements mit einer Deckkraft ist. Dies ist eine Möglichkeit, wie Sie versuchen könnten, es zu umgehen.

#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>

Quelle

2016-04-11 19:58:25 sniels

fadein den Hintergrund, aber nicht in den Vordergrund

Antwort

Verwandte Themen