Question

我无法在用于客户端的此模板中指定img。我想在移动和桌面版本上放置不同的图像在后台和内联CSS不让我指定图片由于某种原因我不知道。

这是html代码：

<aside id="colorlib-hero">
        <div class="flexslider">
            <ul class="slides">
                <li style="background-image: url(images/img_bg_3.jpg);">
                    <div class="overlay"></div>
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-8 col-sm-12 col-md-offset-2 slider-text">
                                <div class="slider-text-inner text-center">
                                    <h2 class=text-bg><span class="mofo">Arbeiten</span></h2>
                                    <h1 class=text-bg><span class="mofo">TRÄUME MIT UNS</span></h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
             </ul>
         </div>
     </aside>

这是我用来替换图片的CSS代码：

@media (min-width: 601px) {
   #somediv{
       background: url('images/bg.jpg') repeat-x;
   }
}

@media (max-width: 600px) {
   #somediv{
      background: url('images/bg-mobile.jpg') repeat-x;
   }
}

提前谢谢

Answer 1

您需要使用!important;覆盖内联样式。示例：

background: url('images/bg.jpg') repeat-x!important;

尽管!important很少使用，但此处有更多信息

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception

Answer 2

您应该使用!important将规则标记为更重要的规则，该规则会否决所有其他规则。如：

background: url('images/bg.jpg') repeat-x !important;

或者，如果您想使用<img>，则可以使用by Mozilla所述的<picture>元素。

<picture>
    <source srcset="images/bg.jpg" media="(min-width: 601px)">
    <source srcset="images/bg-mobile.jpg" media="(max-width: 600px)">
    <img src="images/img_bg_3.jpg">
</picture>

无法指定要在媒体查询中替换的img

2 个答案: