带有背景位置的背景大小不缩放位置？

我有一个91 * 91px的62张图片的精灵，这使得整个东西91 * 5642 px。它们以一种动态的网格形式显示，根据用户/指针的移动而增长和缩小。有时一个元素(标准91 * 91 px)放大到120 * 120 px。显然，我想让背景增大，这样整个91 * 91像素的图像就会显示在整个120 * 120的元素中。

输入background-size: 100% auto以使宽度始终完美。现在的问题是background-position期望它的值也被更新!所有62个元素都有内联style=background-position etc。我无法从内联更新背景位置。我希望背景先定位，然后调整大小(缩放)，而不是调整大小，然后定位(缩放到错误的位置)。

我不确定我在说什么。稍微澄清一下:

所有元素的样式为width: 91px; height: 91px; background-size: 100% auto;。
第二张图片的内联样式为background-position: 0 -91px。
当你悬停该元素时，它的样式为width: 120px; height: 120px;然后它显示第二张图片的大部分和第一张图片的一部分，因为定位发生在调整大小=(
如果我改变背景位置(缩放/悬停后)为0 -120px，它会正确对齐。(但很明显，当不缩放/悬停时，这是错误的。)

一个非常简单的解决方案是使用实际的zoom: 1.3或transform: scale(1.3)，但这在过渡时非常非常慢。

我一定错过了什么。CSS必须比这更聪明。背景大小的精灵…这不是不可能的，不是吗?

精灵看起来如何取决于我，所以我可以让它有一个120 * 120的网格而不是91 * 91，如果那样会更简单的话…

EDIT: With example fiddle: http://jsfiddle.net/rudiedirkx/g4RQx/

智能答案1: background-position: 0 calc(100% / 61 * 2)(61因为62张图片，2因为第三张图片)

其实很简单，只要使用百分比位置。

background-position: 0 3.28%;

http://jsfiddle.net/g4RQx/18/

在悬停状态下，根据缩放比例编辑背景位置

a:hover {
    width: 120px;
    height: 120px;
    background-position: 0 -240px; /* -182px * 1.3186... */
}

小提琴

郑重声明:在你的问题中，你提到尺度是缓慢的。我尝试使用缩放，我没有看到缓慢的转换:

a:hover {
    transform: scale(1.3);
    transform-origin: 0 0;
    transition: all .5s;
}

小提琴

如果您的需求是平滑过渡，那么这就是您所需要的。

DEMO2居中缩放。

HTML:

 Hover image large transition<br>
    Hover that:<br>
    
    <p><a href="#"></a></p>
    <p><a href="#"></a></p>
    <p><a href="#"></a></p>
    <p><a href="#"></a></p>
    <p><a href="#"></a></p>

CSS:

 p {
    margin: 0;
    display: inline-block;
    
}
a {
    display: block;
    border: solid 10px green;
    /* always: */
    width: 91px;
    height: 91px;
    background: black url(//hotblocks.nl/tests/gamessprite.gif) no-repeat 0 0;
    background-size: 100% auto;
    /* inline: */
    background-position: 0 -182px;
     -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}
a:hover {
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
    -webkit-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

小提琴:小提琴

嗯…，你有几个问题。: -)
内联样式在任何方面都是"坏"的。一个是不能用任何外部CSS覆盖它们(因为它们具有更高的专用性)。这就是为什么没有纯CSS解决方案的原因之一。

另一个原因是，你需要根据实际位置，分别根据精灵数重新计算背景位置。一些你不能用CSS做的事情(例如:background position: 0 calc(n -child * 91px);)

所以唯一的纯CCS方法将是使用销售转换，这也是相当好的支持!

顺便说一句:"精灵的样子取决于我，所以我可以让它有一个120 * 120的网格而不是91 * 91，如果那样更简单的话……"
这样至少会好一些。缩小规模总是比扩大规模质量更好!

一个Javascript的解决方案，特别是使用jQuery是相当简单的相反，因为你可以使用。index()函数，所以很容易计算新的背景位置。

结论:
目前还没有真正/实用的解决方案来处理这样的CSS精灵!

许多答案建议在background-pos中使用百分比而不是静态像素，但是我有不同的方法。这有点奇怪……但它确实有效!& lt;——小提琴

所以我在你的链接中添加了一个跨度，并附加了背景。而不是你的内联背景位置，我在span上使用了以百分比为单位的高度，像这样:

<a href="#">
    <span style="height: 100%"></span>
</a>

有了这个css，它将是所有你需要的，图像将修复其余的。

a {
    display: block;
    overflow: hidden;
    width: 91px;
    height: 91px;
    position: relative;
}
a span{
    background: url(//hotblocks.nl/tests/gamessprite.gif) no-repeat 0 0;
    background-size: 100% auto;
    background-position: 0 0;
    position: absolute;
    display: block;
    bottom: 0;
    width: 100%;
}
a:hover {
    width: 120px;
    height: 120px;
}

如果你不使用其他解决方案，你需要更多的html和css，但是解决问题的方法越多越好:)

我认为答案应该很简单，

我已经更新了fiddle，

请检查，

如果你像这样指定样式，它应该很容易解决问题…

a {
 display: block; /* always: */
 width: 91px;
 height: 91px;
 background: black url(//hotblocks.nl/tests/gamessprite.gif) no-repeat 0 0;
 background-size: 100% auto;
 /* inline: */
 background-position: 0% 3.30%; /* this will do the trick */ 
}
a:hover {
 width: 150px;
 height: 150px;
}

相关内容

最新更新

热门标签：