在通过内联 CSS 应用的背景上使用 background-size答案

【问题标题】：Use background-size on background applied via inline CSS在通过内联 CSS 应用的背景上使用 background-size
【发布时间】：2014-11-26 14:53:16
【问题描述】：

我正在应用内联样式的背景，因为它需要使用 PHP 更新：

<div style="background:url(img.jpg)">
    test
</div>

在某个断点，我需要应用 background-size:contain;

@media screen and (max-width: 600px) {
    div {
        background-size:contain;
    }
}

编辑- 在这种情况下，当与内联 CSS 结合时，样式表中的 CSS 似乎不适用。有解决办法吗？

这是一个简单的 jsFiddle -> http://jsfiddle.net/z5r1hwmq/

【问题讨论】：

【解决方案1】：

您可以尝试添加!important，例如

background-size:contain!important;

但是，这不是最佳选择。它会改变大小，但如果你有你正在使用的真实结构会更好，这样你就可以通过父元素获得所需的元素，并且能够在不添加“！important”的情况下做到这一点。

【讨论】：

【解决方案2】：

您可以使用 php 动态地将类添加/更改为元素而不是内联样式。

您还需要像 background-size:contain !important; 这样为 css 类添加优先级，否则内联样式具有优先级。

希望这会有所帮助。

【讨论】：

【解决方案3】：

只需使用background-image 而不是background，这样您就不会覆盖所有背景选项，也不需要!important ;)

<div style="background-image:url(img.jpg)">
   test
</div>

【讨论】：

非常正确。我在实际应用程序中使用了一些额外的背景选项，这就是我没有使用背景图像的原因，但在大多数情况下，您的建议是更好的选择。
应该被接受的答案。由于在使用background: url('') 时使用了内联 css，因此一直在努力忽略 css。通过使用background-image: url('')，我可以在没有!important的情况下使用css