CSS - 图片在动态添加时看起来不同

我有一个fiddle，我想动态添加背景图片。我想通过它，像这样：CSS - 图片在动态添加时看起来不同

<div class="card" style="background:url(http://media.comicbook.com/2016/05/captain-america-civil-war-02082016-182755.png), #0a0a0a;">

但随后的图像不是大小时，它是在CSS文件中设置相同。我该如何解决这个问题？

来源

2016-11-12 Leff

问题是background是所有背景相关属性的速记属性。因此，将其设置在style上会覆盖所有其他属性。

如果您在所有其他移动属性之后移动该属性，CSS中也会发生同样的情况。

所以在CSS，你有（和它的作品）

background:url(http://media.comicbook.com/2016/05/captain-america-civil-war-02082016-182755.png), #0a0a0a; 
    background-position: -60px 42px, 0; 
    background-repeat: no-repeat; 
    background-size: 70% 88%;

，但如果你将其更改为

background-position: -60px 42px, 0; 
    background-repeat: no-repeat; 
    background-size: 70% 88%; 
    background:url(http://media.comicbook.com/2016/05/captain-america-civil-war-02082016-182755.png), #0a0a0a;

不会。

的solutin是刚刚设置的style="background-image:url('...');background-color:#0a0a0a"而不是整个background。

演示在https://jsfiddle.net/zo7rf71q/5/

来源

2016-11-12 13:21:19

如果您在HTML样式属性中使用background，这将覆盖样式指南中定义的所有其他CSS。

您需要将!important遍布在你的CSS背景属性，如：

.card { 
    background-position: -60px 42px, 0 !important; 
    background-repeat: no-repeat !important; 
    background-size: 70% 88% !important; 
}

更新Fiddle。

希望这会有所帮助！

来源

2016-11-12 13:20:38

这将很好地工作，你，但不建议写内嵌CSS

<div class="card" style="width: 100%; height: 100%; background: url(http://media.comicbook.com/2016/05/captain-america-civil-war-02082016-182755.png) no-repeat;"> 
</div>

来源

2016-11-12 13:30:28

CSS - 图片在动态添加时看起来不同

回答

相关问题