web-dev-qa-db-ja.com

Angular動的背景画像

Htmlテンプレートには、動的画像を使用したこのスタイルがあります。

<div style="background: url('/img/{{item.img}}'); width: 200px; height: 150px"></div>

これはWebブラウザーとAndroidブラウザーで動作します。ただし、「style =」を使用して動的な背景画像はiPadで表示されません。

私は常にimgタグを使用してダイナミックイメージを作成できましたが、iPadのスタイル/ CSSソリューションを探しています。

cssipadangularstyles
18
Pat M

代わりに使用

<div [ngStyle]="{background: 'url(/img/' + item.img + ')', width: '200px', height: '150px'"></div>

または

<div [style.background]="'url(/img/' + item.img + ')'"
    [style.width.px]="200" [style.height.px]="150p"></div>

RC.1では、バインド構文を使用して一部のスタイルを追加できない も参照してください。

64
Günter Zöchbauer

+GünterZöchbauerの2番目の部分の回答は、少なくともSafariで不要な補足スタイルbackground-position：initialおよびbackground-size：initialを生成するため、これを行う必要があります。

背景画像スタイルのみを設定していることに注意してください：

<div [style.background-image]="'url(/img/' + item.img + ')'"
 [style.width.px]="200" [style.height.px]="150p"></div>
9
Stéphane de Luca
<div id="component-id" [style.background-image]="'url(www.domain.com/path/'+bgImageVariable+')'">
    <!-- ... -->
</div>

または

<div id="component-id" [style.background-image]="'url('+bgImageVariable+')'">
    <!-- ... -->
</div>

単一の変数にURLパスを追加することにより、2番目の方法で使用できます。例えば

bgImageVariable="www.domain.com/path/img.jpg";
3
Coder Girl

これを使用して、必要に応じてdivタグの高さと幅を設定します

<div id="component-id" [style.backgroundImage]="'url('+bgImageVariable+')'"></div>
0
Manoj Rana