Question

天哪甚至不确定怎么问这个。我有一个幻灯片，目前只有一张幻灯片，显示我网站的背景主图像。我正在尝试创建一个媒体查询，将大背景换成另一个图像，更适合移动设备。我“似乎”创建了一个有效的查询，但它没有替换主图像，它将我的新图像加载到主图像的“后面”。 ???

这是HTML ..

<div id="home">                 
  <div class="tp-banner-container">
    <div class="tp-banner" >                
      <ul>
          <!-- THE FIRST SLIDE -->
            <li data-transition="zoomout" data-slotamount="1" data-masterspeed="700">
            <img src="images/1.jpg" alt="" />

}
                            <!-- THE CAPTIONS IN THIS SLIDE -->
                            <div class="caption big-text lft"  
                                 data-x="center" 
                                 data-y="350"
                                width="10px" 
                                 data-speed="700" 
                                 data-start="700" 
                                 data-easing="easeOutExpo">
                                    <div class="big-text"><span4>YOUR IDEAS REALIZED</span4></br><div><a class="button3 scroll" href="#contact">CONTACT US</a></div></div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

这是我的媒体查询

@media only screen and (min-width: 320px) and (max-width: 414px) {
.tp-banner-container .tp-banner >ul >li .tp-bgimg:nth-child(1) {
        background:url('../images/1_mobile.jpg') no-repeat center center;
}}

根据我浏览器上的检查员的说法，它“看起来”似乎有效，但却在主图像后面加载。希望你能看到这个屏幕截图...

任何人都知道我需要做些什么来使移动背景取代幻灯片试图加载的移动背景？非常感谢任何信息！

Answer 1

从我在图像中看到的内容（以及难以真正从图像中确切知道）中，您在同一元素上有两个背景图像css属性，一个在html中内联，一个在媒体查询中。每当存在两个冲突的css属性时，内联的始终优先。如果您无法更改内联background-image属性，请尝试将!important添加到媒体查询，但这可能也不起作用。无法检查自己的图像。但这是你问题的原因。

Answer 2

如果发生了javascript，您可能需要单独覆盖每个背景属性，而不是仅使用单行“background”属性。

媒体查询无法替换背景图像

2 个答案: