は、バックグラウンドではなく、私がフェードインする背景画像を取得しようとしているフォアグラウンド

をフェードインは、バックグラウンドではなく、私がフェードインする背景画像を取得しようとしているフォアグラウンド

私は、背景画像を動的に設定されている<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

ng-classにフェードインを適用する方法を知りたいのでAngularです – tommyd456

確かにあなたは角度を使用しており、角を使ってCSSを適用しています。この問題自体は純粋なHTMLとCSSに分類されます。 – sniels

すなわちフォアグラウンドをフェードインしていないように、それを一緒につなぎするかどうかはわかりません不透明度を要素に設定すると、すべての子に適用されます。それがあなたの見出しに反映されないようにする唯一の方法は、それを不透明度のある要素の子孫にしないことです。これを回避しようとする方法の1つです。

#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

は、バックグラウンドではなく、私がフェードインする背景画像を取得しようとしているフォアグラウンド

答えて

関連する問題