使用背景大小的图像交换：包含

Question

我不确定该怎么做。我想在其上使用一张带有两张不同图片的图片进行图像交换（悬停时），因此不会因为需要加载新图片而导致延迟。

但是，我使用的是背景大小：包含，因为根据一系列不同的因素，图像的比例会有很多变化。有没有办法让它发挥作用？它根本不适合我。它试图将整个img放入空间，而不仅仅是应该去那里的那一半。

这是css：

.newbutton a:hover , .newbutton a:active{
    background-image: url(images/new-post-button.png);
    display: block;
    background-color: #9bb6c3;
    background-position: 0 100%;
}
.newbutton a {
    background-color: #c0d6e4;
    background-image: url(images/new-post-button.png);
    background-position: 0 0;
    display: block;
    background-size: contain;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;    
}