Question

我有fiddle，我想动态添加背景图片。我试图像这样传递它：

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

但是图像与css文件中设置的图像大小不同。我该如何解决这个问题？

Answer 1

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

您需要在CSS中的所有背景属性中放置!important，例如：

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

更新了 Fiddle 。

希望这有帮助！

Answer 2

问题是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;

不会。

解决方案是设置style="background-image:url('...');background-color:#0a0a0a"而不是整个background。

https://jsfiddle.net/zo7rf71q/5/

演示

Answer 3

这对你很好，但不建议写内联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>

CSS - 动态添加时，图像看起来有所不同

3 个答案: