css - 为什么我的媒体查询断点不触发此图像？

Question

我有一个媒体查询设置，为小于 480 像素的屏幕显示不同的图像，但图像在断点处没有改变。 Here is a jsfiddle for the whole email.媒体查询如下。

@media only screen and (max-width: 480px){
                /* /\/\/\/\/\/\/ CLIENT-SPECIFIC MOBILE STYLES /\/\/\/\/\/\/ */
                body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;} /* Prevent Webkit platforms from changing default text sizes */
                body{width:100% !important; min-width:100% !important;} /* Prevent iOS Mail from adding padding to the body */

                *[class].social-cell {
                    width: 100% !important;
                }
                *[class].social-spacer {
                    height: 10px !important;
                }
                .hero-image .top-image {
                    background-image: url('http://i1045.photobucket.com/albums/b451/stonerootmedia/header-image%20-480px_zpsyffs7ced.png') !important}
            }

Answer 1

将 .hero-image .top-image 更改为 .hero-image.top-image。类名之间有空格，您正在寻找具有 .top-image 类的元素，但谁的父元素具有 .hero-image 类。

它在技术上是可行的，但仍然不是你所期望的，因为原始图像是在 img src 属性中设置的，这将隐藏任何背景图像你有。