[英]CSS Background Position not shifting
this problem is a bit hard to explain. 这个问题有点难以解释。
I'm using a PNG sprite to do 48x48px icons and shifting the background by Class. 我正在使用PNG精灵来制作48x48px图标,并按班级移动背景。
For example, 例如,
<style>
div.icon {
width:48px;
height:48px;
background: url(../img/48sprite.png);
}
.cart { background-position: -96px -336px; }
.sale { background-position: -96px -384px; }
.bino { background-position: -96px -432px; }
</style>
(There are about 35 more of these background-position shifting classes for different icons.) (这些背景位置平移类大约有35个以上,用于不同的图标。)
<div class="widelist">
<div class="widelist-itemwrap">
<div class="icon bino left"></div>
<div class="widelist-content left">
<h4>Widelist Heading</h4>
<p>Widelist content</p>
</div>
</div>
</div>
The problem is that no matter whether I put bino, sale, cart, or any of the other 36 icons in the sprite as the second class after the Icon class, I still just get the background image located at 0px, 0px of the PNG file. 问题是,无论我是否将bino,sale,car或其他36个图标放在Sprite中,作为继Icon类之后的第二类,我仍然只得到位于PNG文件的0px,0px处的背景图像。
The weird part is that it displays PERFECTLY in the Dreamweaver Design View, but as soon as I go to Live View or preview in Chrome/Safari etc, the icons all switch to the default icon instead of being shifted. 奇怪的是,它在Dreamweaver设计视图中完美显示,但是一旦我进入实时视图或在Chrome / Safari等中预览时,图标全部切换为默认图标,而不是移动。
Developer Tools in Chrome shows that the background-position property has been properly shifted, but visually, the icon is incorrect. Chrome中的开发人员工具显示背景位置属性已正确移动,但从外观上看,该图标不正确。
Just to clarify, I've used this technique successfully many times before with no problem - just having a bad day I guess. 为了明确起见,我已经成功地多次使用了该技术,而且没有出现问题-我猜今天过得很糟糕。
Any ideas? 有任何想法吗?
The problem is that div.icon
is more specific than .bino
. 问题在于
div.icon
比.bino
更具体 。
The background
rule is shorthand for (amongst others) the background-position
property, so the background
property on div.icon
is preventing your differing background-position
rules from being applied. background
规则( div.icon
是background-position
属性)是background
规则的简写,因此div.icon
上的background
属性阻止应用您不同的background-position
规则。
You can fix it by changing div.icon
to just .icon
. 您可以通过更改修复
div.icon
只是.icon
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.