Question

我需要一双关于这段代码的新眼睛。必须有编码器的盲目性或其他东西。对于我的生活，我无法弄清楚为什么图像没有在页面上加载。

我一直坐在这里将其与其他具有不同类和图像精灵的工作代码进行比较，无法看出问题所在。

如果有人不介意花一两分钟跑过去，我会非常感激。

.480sl1, .480sl2, .480sl3, .480sl4, .480sl5, .480sl6, .480sl7, .480sl8, .480sl9, .480sl10, .480sl11, .480sl12, .480sl13
{background-image: url('https://freephonewallpapersformobile.files.wordpress.com/2015/11/480-sl-sprite.jpg');
background-repeat: no-repeat;
width:100px;
height:166px;   
display:inline-block;



}



.480sl1 {background-position: 0px 0px;}
.480sl2 {background-position: 0px -166px;}
.480sl3 {background-position: 0px -332px;}
.480sl4 {background-position: 0px -498px;}
.480sl5 {background-position: 0px -664px;}
.480sl6 {background-position: 0px -830px;}
.480sl7 {background-position: 0px -996px;}
.480sl8 {background-position: 0px -1162px;}
.480sl9 {background-position: 0px -1328px;}
.480sl10 {background-position: 0px -1494px;}
.480sl11 {background-position: 0px -1660px;}
.480sl12 {background-position: 0px -1826px;}
.480sl13 {background-position: 0px -1992px;}

<div class="top_grow11"><a href="free-480x800-mobile-wallpapers.htm"><img class="480sl1"></img></a></div>
<div class="top_grow11"><a href="free-480-x-800-mobile-wallpaper.htm"><img class="480sl2"></img></a></div>
<div class="top_grow11"><a href="free-480x800-cellphone-wallpapers.htm"><img class="480sl3"></img></a></div>
<div class="top_grow11"><a href="free-480-x-800-cellphone-wallpaper.htm"><img class="480sl4"></img></a></div>
<div class="top_grow11"><a href="free-480x800-cell-phone-wallpapers.htm"><img class="480sl5"></img></a></div>
<div class="top_grow11"><a href="free-cell-phone-480-x-800-wallpaper.htm"><img class="480sl6"></img></a></div>
<div class="top_grow11"><a href="free-480x800-mobile-backgrounds.htm"><img class="480sl7"></img></a></div><div class="top_grow11"><a href="free-mobile-480-x-800-background.htm"><img class="480sl8"></img></a></div>
<div class="top_grow11"><a href="free-480x800-cellphone-backgrounds.htm"><img class="480sl9"></img></a></div>
<div class="top_grow11"><a href="free-cellphone-480-x-800-background.htm"><img class="480sl10"></img></a></div>
<div class="top_grow11"><a href="free-480x800-cell-phone-backgrounds.htm"><img class="480sl11"></img></a></div>
<div class="top_grow11"><a href="free-cell-phone-480-x-800-background.htm"><img class="480sl12"></img></a></div>
<div class="top_grow11"><a href="samsung-galaxy-s-2-ii-i9100-480x800-mobile-wallpapers.htm"><img class="480sl13"></img></a></div>

Answer 1

一个简单的原因：您的CSS / HTML课程不能以数字开头！

我更改了您的班级名称，并立即弹出图像。这是你需要做的唯一事情。

<强> HTML：

.aClassNameStartingWithaLetter {
background-image: url('https://freephonewallpapersformobile.files.wordpress.com/2015/11/480-sl-sprite.jpg');
background-repeat: no-repeat;
width:100px;
height:166px;   
display:inline-block;
}

.aClassNameStartingWithaLetter {background-position: 0px 0px;}

<强> CSS：

function computeMaxHeight(els) {
    var ht = 0;
    els.forEach(function (el) {
        var elht = el.height();
        if (elht > ht) {
            ht = elht;
        }
    });
    return ht;
}

function setMinMeight(els) {
    var maxht = computeMaxHeight(els);
    //console.log("here resize. maxht = " + maxht);

    els.forEach(function (el) {
        el.css('min-height', maxht);
    });

}

$(document).ready(function () {

    var els = [$("#non-porre-limiti"), $("#we-love-pagi"), $("#vuoto"), $("#pagiletter"), $("#pagi-focus")];

    $(window).on('resize', function () {
        setMinMeight(els);

    });

    setMinMeight(els);

});

演示：http://jsfiddle.net/uo5cah4g/1/

Answer 2

您的 class name 无效

班级名称规则

名称必须以下划线（_），连字符（ - ）或a开头字母（a-z），后跟任意数量的连字符，下划线，字母，或数字

More

<div class="top_grow11"><a href="free-480x800-mobile-wallpapers.htm"><img class="sl1"/></a></div>
<div class="top_grow11"><a href="free-480-x-800-mobile-wallpaper.htm"><img class="sl2"/></a></div>
<div class="top_grow11"><a href="free-480x800-cellphone-wallpapers.htm"><img class="sl3"/></a></div>
<div class="top_grow11"><a href="free-480-x-800-cellphone-wallpaper.htm"><img class="sl4"/></a></div>
<div class="top_grow11"><a href="free-480x800-cell-phone-wallpapers.htm"><img class="sl5"/></a></div>
<div class="top_grow11"><a href="free-cell-phone-480-x-800-wallpaper.htm"><img class="sl6"/></a></div>
<div class="top_grow11"><a href="free-480x800-mobile-backgrounds.htm"><img class="sl7"/></a></div>
<div class="top_grow11"><a href="free-mobile-480-x-800-background.htm"><img class="sl8"/></a></div>
<div class="top_grow11"><a href="free-480x800-cellphone-backgrounds.htm"><img class="sl9"/></a></div>
<div class="top_grow11"><a href="free-cellphone-480-x-800-background.htm"><img class="sl10"/></a></div>
<div class="top_grow11"><a href="free-480x800-cell-phone-backgrounds.htm"><img class="sl11"/></a></div>
<div class="top_grow11"><a href="free-cell-phone-480-x-800-background.htm"><img class="sl12"/></a></div>
<div class="top_grow11"><a href="samsung-galaxy-s-2-ii-i9100-480x800-mobile-wallpapers.htm"><img class="sl13"/></a></div>

.sl1,
.sl2,
.sl3,
.sl4,
.sl5,
.sl6,
.sl7,
.sl8,
.sl9,
.sl10,
.sl11,
.sl12,
.sl13 {
    background-image: url('https://freephonewallpapersformobile.files.wordpress.com/2015/11/-sl-sprite.jpg');
    background-repeat: no-repeat;
    width: 100px;
    height: 166px;
    display: inline-block;

}

.sl1 {
    background-position: 0px 0px;
}

.sl2 {
    background-position: 0px -166px;
}

.sl3 {
    background-position: 0px -332px;
}

.sl4 {
    background-position: 0px -498px;
}

.sl5 {
    background-position: 0px -664px;
}

.sl6 {
    background-position: 0px -830px;
}

.sl7 {
    background-position: 0px -996px;
}

.sl8 {
    background-position: 0px -1162px;
}

.sl9 {
    background-position: 0px -1328px;
}

.sl10 {
    background-position: 0px -1494px;
}

.sl11 {
    background-position: 0px -1660px;
}

.sl12 {
    background-position: 0px -1826px;
}

.sl13 {
    background-position: 0px -1992px;
}

为什么我的精灵图像不显示？

2 个答案: