带有背景位置的背景大小不会缩放位置?
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.3
或transform: 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 个并且还在增长,所以这将是巨大的<span>
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 大小