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

Posted

技术标签:

【中文标题】带有背景位置的背景大小不会缩放位置?【英文标题】:background-size with background-position doesn't scale the position? 【发布时间】:2013-06-06 16:40:18 【问题描述】:

我有一个包含 62 个 91 * 91 像素的图像的精灵,这使得整个图像为 91 * 5642 像素。它们以一种动态网格的形式显示,该网格根据用户/指针的移动而增长和缩小。有时,一个元素(标准 91 * 91 像素)会放大到 120 * 120 像素。显然,我希望背景随着整个 91 * 91 px 图像的增长而显示在整个 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.3transform: scale(1.3),但是过渡非常慢。

我一定错过了什么。 CSS 必须比这更聪明。具有背景大小的精灵......这不是不可能的吧!?

精灵的外观取决于我,所以我可以让它有一个 120 * 120 的网格而不是 91 * 91,如果这样更简单的话......

编辑: 以小提琴为例:http://jsfiddle.net/rudiedirkx/g4RQx/

聪明的答案 1: background-position: 0 calc(100% / 61 * 2)(61 因为 62 张图片,2 因为第 3 张图片)

【问题讨论】:

SASS 或 LESS CSS 预处理可能有助于简化此操作 在很多情况下使用精灵表有很多好处,但在这种情况下使用单个图像会省去很多麻烦。您需要使用精灵表有什么特别的原因吗? @DevinCrossman 我不这么认为。只有制作精灵更容易。预处理器在 CSS 上没有改进。如果在 CSS 中无法实现,那么预处理器就无法实现。 @3rror404 62 张图片...这需要一个精灵 IMO。 查看这个问题的答案***.com/questions/2430206/… 可能是一个可能的解决方案? 【参考方案1】:

其实很简单,就是使用百分比位置。

background-position: 0 3.28%;

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

【讨论】:

@Rudie 如果您采用这种方法,我建议为您的图像添加足够的长度(即使只是空白空间)以允许简单的百分比 - 即使其长度为 100 * 91px,并且您的数字很容易而不是圆角。 很好的答案!这应该得到赏金。 非常感谢@Dom。真实的事实马修,最好有四舍五入的数字,这样你就不会得到一个外星像素线。 更好:background-position: 0 -webkit-calc(100% / 62 * 0) jsfiddle.net/rudiedirkx/g4RQx 所有的,@rafaelcastrocouto。谢谢!【参考方案2】:

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

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

FIDDLE


仅作记录:在您的问题中,您提到规模很慢。我尝试使用比例,但没有看到缓慢的转换:

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

FIDDLE

【讨论】:

这个问题是位置部分是内联的并且每个图像都设置,这就是为什么你需要每个<a>元素设置背景位置。 或者 - 我应该说至少我是这么理解的。 是的,马修,你明白了。我在 CSS 中需要 62 个不同的 :hover 状态。不可接受。 @Danield 我会再试一次scale()。一年前很慢。 这应该是正确的做法!这很好用!【参考方案3】:

如果您的要求是比这更平滑的过渡,这就是您所需要的。

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;

小提琴:fiddle

【讨论】:

我建议你添加 translate3d()。这样您就可以使用 GPU 加速。来源:mobile.smashingmagazine.com/2012/06/21/… 我正在寻找没有scale() 的答案。这不需要background-position 解决方案。【参考方案4】:

嗯...,你有几个问题。 ;-) 内联样式在所有方面都是“坏的”。一是您不能用任何外部 CSS 覆盖它们(因为它们具有更高的特异性)。因此,这已经是您的问题没有纯 CSS 解决方案的原因之一。

另一个原因是,您需要根据实际位置或精灵编号重新计算背景位置。你还不能用 CSS 做的事情(例如:背景位置:0 calc(nth-child * 91px);)

所以唯一的纯 CCS 方式将使用同样fairly good supported 的销售转换!

顺便说一句:“精灵的外观取决于我,所以我可以让它有一个 120 * 120 的网格而不是 91 * 91,如果这样更简单的话......” 至少这样会更好。缩小尺寸总是比放大质量更好!

相反,javascript 解决方案,尤其是使用 jQuery 时非常简单,因为您可以使用 .index() function 轻松计算新的背景位置。

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

【讨论】:

您/客户可以使用!important 覆盖内联样式。我不能使用 jQuery 的 .index() 因为元素顺序不是精灵顺序。所有源图像都是 91*91 =( 所以保存为 120 不是很有用。transform: scale 确实是最简单的,但我的性能很差。(最后一次尝试效果很好。)我主要是在寻找明亮的新想法。有吗? 好的,!important 是可能的(我个人从不使用它),但如前所述,它无济于事,因为 AFAIK 没有 CSS 解决方案。关于 JS 的事情......,如果元素顺序不是精灵顺序,你也可以使用背景图像的当前坐标来计算新的。“我主要是在寻找新的想法。有吗?”不,真的不是!因为恕我直言,使用一个图形(而不是 60 个或更多)是有意义的。不幸的是,没有其他方法可以使用 CSS 实现您的目标。 源图像为 91*91,构成 1 个精灵。我的意思是。同意transform: scale。可能为什么它也被发明了=)也许zoom: 1.3也可以工作......但利润率为负......哦,会尝试的。【参考方案5】:

许多答案建议背景位置中的百分比而不是静态像素,但是我有不同的方法。有点奇怪...but it works!

所以我在您的链接中添加了一个跨度,并附有背景。而不是你的内联背景位置,而是在跨度上使用高度百分比,如下所示:

<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,但解决问题的方法越多越好:)

【讨论】:

这很聪明!如果我只有 ~ 10 个图块,那将是完全可以接受的,但我有 62 个并且还在增长,所以这将是巨大的 &lt;span&gt;s 并且渲染非常昂贵,即使它们只是部分可见。不过这很聪明 =) 我喜欢。【参考方案6】:

我觉得答案应该很简单,

我已经更新了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;

如有疑问请回复...

【讨论】:

以上是关于带有背景位置的背景大小不会缩放位置?的主要内容,如果未能解决你的问题,请参考以下文章

将带有图像背景的 UI Button 缩放为 iphone 大小

IOS - 将背景图像缩放到不同的屏幕尺寸并将标签放在固定位置上

javascript,获取使用包含属性缩放的背景大小

css文件 如何使背景图片大小适应div的大小

多重背景&过渡

CSSCSS 背景设置 ② ( 背景位置 | 背景位置-方位值设置 )