[英]CSS sprites background and selectors
Thank you in advance for any help you can give. 预先感谢您提供的任何帮助。 I am implementing sprites for the first time and am looking to streamline my code.
我是第一次实现Sprite,并且希望简化我的代码。 Below is my css and html.
以下是我的CSS和HTML。
CSS CSS
div[class^='Rating']
{
background:url('http://10.0.50.19/images/Ratings.png') no-repeat;
width:68px;
height:13px;
display:block;
}
.Rating0_5 { background-position: 0px 0px; }
.Rating1_0 { background-position: 0px -13px; }
.Rating1_5 { background-position: 0px -27px; }
.Rating2_0 { background-position: 0px -41px; }
.Rating2_5 { background-position: 0px -55px; }
.Rating3_0 { background-position: 0px -69px; }
.Rating3_5 { background-position: 0px -83px; }
.Rating4_0 { background-position: 0px -98px; }
.Rating4_5 { background-position: 0px -112px; }
.Rating5_0 { background-position: 0px -125px; }
HTML HTML
<div class="Rating0_5"></div>
<div class="Rating1_0"></div>
....
The issue I am having is the background-position is always being set to 0px 0px
as I believe the first style is overriding the background-position elements (according to Firebug). 我遇到的问题是背景位置始终设置为
0px 0px
因为我相信第一种样式会覆盖背景位置元素(根据Firebug)。 If I copy copy the background:url('http://10.0.50.19/images/Ratings.png') no-repeat;
如果我复制,请复制
background:url('http://10.0.50.19/images/Ratings.png') no-repeat;
to each of the .RatingX_X
styles it works fine but I don't want to repeat the background-image
and repeat text if I don't have to. 对于每种
.RatingX_X
样式,它都可以正常工作,但是如果不需要,我不想重复background-image
和重复文本。 Hopefully this makes sense. 希望这是有道理的。 Thanks again.
再次感谢。
Define your first rule as: 将第一个规则定义为:
div[class^='Rating']
{
background-image:url('http://10.0.50.19/images/Ratings.png');
background-repeat: no-repeat;
width:68px;
height:13px;
display:block;
}
and it should work. 它应该工作。
On your background:
you are not definin the position so it assumes it is on the default 0 0, and since your first selector is more specified as your background-position selectors it overrides. 在您的
background:
您没有定义位置,因此假定它在默认0 0上,并且由于第一个选择器被指定为背景位置选择器,因此它将被覆盖。
The easiest and most cross-browser way would be to add a common class on your elements ( <div class="Rating Rating0_5"></div>
) and then simply change div[class^='Rating']
to .Rating
. 最简单,最跨浏览器的方法是在元素上添加一个通用类(
<div class="Rating Rating0_5"></div>
),然后将div[class^='Rating']
更改为.Rating
。
Your other possible solution is to fix the selector specificity in your code. 您可能的其他解决方案是修复代码中的选择器特异性 。 Either use simply
[class^='Rating']
or write your class selectors as div.Rating0_5
. 只需使用
[class^='Rating']
或将您的类选择器编写为div.Rating0_5
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.