Question

我试图根据。

问题在于,形象正在多变。每一次图像的独特呼声(即每一次新类别的名称,指的是 sp)

Here is the SCSS I am using. First we call the compass mixins:

$sprite-default-size:29px;
@import "compass/utilities/sprites/sprite-img";

接着,我自行 mix,旨在接受一栏图像,使国家掌握每个图像的权利:

$icons: "/assets/icons/socialMediaSprite.png";    
@mixin verticalHoverSprite($row){
        @include sprite-img("/assets/icons/socialMediaSprite.png",1,$row);
        &:hover{
            @include sprite-img($icons,2, $row);
        }
    }

我对每个所需类别采用混合法:

 .socialMediaLink{


        @include verticalHoverSprite(1);

        &.facebook{
                @include verticalHoverSprite(2);
        }
        &.twitter{
                @include verticalHoverSprite(3);
        }

    }

我在此附上图象:

<span class="socialMediaLink"></span>
<span class="facebook socialMediaLink"></span>
<span class="twitter socialMediaLink"></span>

Chrome网络小组的筛查显示图像负荷三次:

Answer 1

检查在您的浏览器中没有残疾(大约17人可以残疾)。

另一种想法是,你的形象只有一次:

background: url(yourimage.png) no-repeat;

之后,它只改变与社会保障局的关系,而没有再次纳入形象:

background-position: 0px 100px;

我猜测你正试图这样做,我只是建议不要把每个阶层的形象包括在内,只改变立场。

Answer 2

RynoRn是正确的,但我认为他的回答需要扩大,以适应特别安全局,而不仅仅是特别安全局。

为了使用<代码>compass和scs加以确定,我从问题改为:

混血现在没有提及图像,只是改变了立场:

@mixin verticalHoverSprite($row){
    @include sprite-position(1, $row);
    &:hover{
        @include sprite-position(2, $row);
    }
}

and we add the background image to the socialMediaLink class:

.socialMediaLink{

    @include sprite-background("/assets/icons/socialMediaSprite.png");

    @include verticalHoverSprite(1);

    &.facebook{
            @include verticalHoverSprite(2);
    }
    &.twitter{
            @include verticalHoverSprite(3);
    }
}

友情链接