CSS 有角度的动态背景图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37575368/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular dynamic background images
提问by Pat M
In the html template I have this style with a dynamic image:
在 html 模板中，我有一个带有动态图像的样式：
<div style="background: url('/img/{{item.img}}'); width: 200px; height: 150px"></div>
Which works in web browsers and android browser. However background images that are dynamic using "style=" are not showing on iPad.
适用于网络浏览器和安卓浏览器。然而，使用“style=”动态的背景图像不会在 iPad 上显示。
I could always create dynamic images using the img tag but I'm looking for a style/css solution for iPad.
我总是可以使用 img 标签创建动态图像，但我正在寻找适用于 iPad 的样式/css 解决方案。
回答by Günter Z?chbauer
Use instead
改用
<div [ngStyle]="{background: 'url(/img/' + item.img + ')', width: '200px', height: '150px'"></div>
or
或者
<div [style.background]="'url(/img/' + item.img + ')'"
[style.width.px]="200" [style.height.px]="150p"></div>
See also In RC.1 some styles can't be added using binding syntax
回答by Stéphane de Luca
You should do that as the +Günter Z?chbauer second part answer generates unwanted supplementary style background-position: initial and background-size: initial on Safari at least.
您应该这样做，因为 +Günter Z?chbauer 第二部分的答案至少在 Safari 上会生成不需要的补充样式 background-position: initial 和 background-size: initial 。
Note that I only set the background-image style:
请注意，我只设置了背景图片样式：
<div [style.background-image]="'url(/img/' + item.img + ')'"
[style.width.px]="200" [style.height.px]="150p"></div>
回答by Coder Girl
<div id="component-id" [style.background-image]="'url(www.domain.com/path/'+bgImageVariable+')'">
<!-- ... -->
</div>
or
或者
<div id="component-id" [style.background-image]="'url('+bgImageVariable+')'">
<!-- ... -->
</div>
you can use in second way by adding URL path in a single variable. for example
您可以通过在单个变量中添加 URL 路径以第二种方式使用。例如
bgImageVariable="www.domain.com/path/img.jpg";
回答by Manoj Rana
use this and set height and width of div tag as per you need
使用它并根据需要设置 div 标签的高度和宽度
<div id="component-id" [style.backgroundImage]="'url('+bgImageVariable+')'"></div>
