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

Question

我正在应用内联样式的背景，因为它需要使用 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/

score 3 · Accepted Answer

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

background-size:contain!important;

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

score 1 · Accepted Answer

Just use background-image instead of background so you don't override all the background options and won't need the !important ;)

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

score 1 · Accepted Answer

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

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

希望这可以帮助。

3 回答 3