sprite - 背景大小与背景位置不缩放位置?

  显示原文与译文双语对照的内容
0 0

我有个sprite 91 * 91 * 5642 91px,这对整个过程的图像像素的62 。 这些属性显示在排序的动态网格的要求增加和收缩,这取决于user/pointer运动。 有时一个元素( std 91 * 91像素) 放大,使其120 * 120像素。 很明显我想将背景扩大,从而使整个91 * 91所示整个120 * 120像素图像元素。

输入 background-size: 100% auto让宽度总是完美的 现在的问题是, background-position期待它的值在升级时应进行更新 ! 62所有元素具有inline style=background-position etc. 我不能更新背景位置,将嵌入。 我想让背景为第一位置,然后调整大小( 缩放( 缩放),而不是再调整位置放置位置不对) 。

我不知道我可能让人难以理解 方式来阐明:

  • 所有图元都具有注释风格 width: 91px; height: 91px; background-size: 100% auto;.
  • 第二个图像会内联样式 background-position: 0 -91px.
  • 悬停的元素时,会得到一个样式 width: 120px; height: 120px;然后它显示第二个图像的部分内容大部分和第1 次,因为定位调整=(之后会发生的某些部分
  • 如果你改变了背景位置( zoom/hover之后), 0 -120px,它正确地对齐。 ( 但不是zooming/hovering时那将会是错误的)

一个很简单的解决方法是使用实际 zoom: 1.3transform: scale(1.3),但那是带有过渡非常VERY速度。

我一定是漏了什么 css肯定没这么笨。 sprite跟背景的大小。 那不是不可能的事情是这样?

更改sprite的外观由我来决定,我就可以让它有一个120 * 120网格而不是91 * 91的,如果会简单。。。

EDIT : 徒步旅行及示例: http://jsfiddle .net/rudiedirkx/g4RQx/

Smart 1:回答background-position: 0 calc(100% / 61 * 2)( 61,因为62图像,2,因为第3 图)

时间:原作者:11个回答

0 0

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

background-position: 0 3.28%;

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

原作者:
0 0

如果你的要求是比这更平滑地过渡为/ / / / / 。

DEMO

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;
}

花样: 身体很好

原作者:
0 0

在悬停状态中,编辑你的背景位置根据缩放比率

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

FIDDLE


我郑重声明: 在问题中你提到过的比例有所下降。 我试着使用比例和transtions我没见过慢:

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

FIDDLE

原作者:
0 0

嗯- -,有以下几个问题。 ,)
内联样式" 惨" 在所有方面。 一个是你无法重写它们与任何外部CSS ( 因为它们具有更高的特定性) 。 这已经一个原因为什么没有纯CSS解决方案为你的问题。

另一个原因是,则需要重新计算背景的位置根据实际位置分别在sprite上号。 是无法做到利用CSS但( e .g 。 就像这样: 背景位置: 0 calc( n 级子* 91px ),)

也就是说只有纯CCS方法将使用销售转化,相当优异的支持

威尔士乳房检查方案: " 更改sprite的外观由我来决定,我就可以让它有120 * 120网格而不是91 * 91,如果那就更简单了- - "
至少那就更好了。 下变换为标清项目总是质量优于升频 !

java script解决方案,尤其是使用JQuery非常简单对异性,如可以使用 .index( ) 函数所以轻松计算新背景位置。

结论:
此时没有real/可行的解决方案,用于处理CSS Sprite中操作 !

原作者:
0 0

我在后台的很多答案建议百分比而非静态像素pos,但是有不同的方法。 有点wierd 。。。 但成功了 ! <拉提琴

所以我添加了一个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所需的其他解决方案,但如果不使用更多的方法来解决一些较好的= = = = =

原作者:
0 0

我觉得答案应该简单,

我已经更新了fiddle

请检查它,

主要原因背景不获取更新它,不会激发重绘事件的背景的浏览器,

这样如果指定样式,它将解决问题,并使之事变得容易。

a:hover {
    width: 120px;
    height: 120px;
    background-size:100% auto; /* this will redraw */
    background-position:0 -242.66px; /*add the difference of 33% = 182+60.66 = 242.66/
}

而你增加的大小由33%原始大小的新位置将更改相同。 在这种情况下其他都是% 也很好但是需要返工这适用于所有sprite图像。

请回复如果有关注,这个可以少re工作。

原作者:
...