[英]Csslint: Background image was used multiple times
I have this in my css: 我在我的CSS中有这个:
@media screen and (max-width:1200px) {
#cssmenu {
background:url(/public/system/assets/img/profile.png) no-repeat , url(/public/system/assets/img/bgprofile.jpg) repeat-x;
width: 100%;
}
}
@media screen and (max-width:970px) {
#cssmenu {
background:url(/public/system/assets/img/profile.png) no-repeat , url(/public/system/assets/img/bgprofile.jpg) repeat-x;
width: 150px;
}
}
I get an error with csslint task: 我在csslint任务中遇到错误:
Background image '/public/system/assets/img/bgprofile.jpg' was used multiple times, first declared at line 753, col 3. Every background-image should be unique. Use a common class for e.g. sprites. (duplicate-background-images)
Is there a way to declare these images so that I don't get this error? 有没有办法声明这些图像,以便我不会收到此错误?
Edit (another case): 编辑(另一个案例):
.linkmycars
{
background:url('/public/system/assets/img/sub.png') no-repeat right 20px, url('/public/system/assets/img/bglinkcars.png') repeat-x #ececec;
}
.addcars
{
background:url('/public/system/assets/img/add.png') no-repeat right 17px, url('/public/system/assets/img/bglinkcars.png') repeat-x #ececec;
}
And I get this error: [L651:C1] Background image '/public/system/assets/img/bglinkcars.png' was used multiple times, first declared at line 628, col 1. Every background-image should be unique. 我得到了这个错误:[L651:C1]背景图像'/public/system/assets/img/bglinkcars.png'被多次使用,首先在第628行第1列声明。每个背景图像应该是唯一的。 Use a common class for eg sprites.
使用公共类例如sprite。 (d uplicate-background-images)
(d uplicate-background-images)
One of your rules here seems totally redundant. 你的一条规则似乎完全是多余的。 The rule under
max-width: 970px
is already true when under max-width: 1200px
. 根据规则
max-width: 970px
下的时候已经是真正的max-width: 1200px
。
To recap, change it to: 回顾一下,将其更改为:
@media screen and (max-width:1200px) {
#cssmenu {
background:url(/public/system/assets/img/profile.png) no-repeat , url(/public/system/assets/img/bgprofile.jpg) repeat-x;
width: 100%;
}
}
@media screen and (max-width:970px) {
#cssmenu {
width: 150px;
}
}
As for your edited question, you face a couple of options. 至于您编辑的问题,您将面临几个选择。 Because you have different images, you can't combine the two rules there.
因为您有不同的图像,所以无法将两个规则组合在一起。
Option one: sprite sub.png and add.png together, then use background position to move them into position/out of sight. 选项一:sprite sub.png和add.png在一起,然后使用背景位置将它们移动到位置/视线之外。 This would only work in some cases, and it's a bit of a mess, depending on the layout.
这只会在某些情况下起作用,而且根据布局的不同而有点混乱。 I made kind of a lazy example, just so you understand what I mean.
我做了一个懒惰的例子,只是让你理解我的意思。 You will probably have to create a sprite with a lot of transparent space between sub.png and add.png: jsfiddle
你可能需要创建一个在sub.png和add.png之间有很多透明空间的精灵: jsfiddle
Option two: easier but less semantic. 方案二:更容易但语义更少。 Instead of using multiple backgrounds, use multiple elements.
而不是使用多个背景,使用多个元素。 jsfiddle and example:
jsfiddle和例子:
html: HTML:
<div class="tiles"><div class="linkmycars"></div></div>
<div class="tiles"><div class="addcars"></div></div>
css: CSS:
.tiles {
background: url(/public/system/assets/img/bgprofile.jpg) repeat-x;
}
.linkmycars, .addcars {
width: 100%;
height: 100%;
}
.linkmycars {
background: url('/public/system/assets/img/sub.png') no-repeat right 20px;
}
.addcars {
background: url('/public/system/assets/img/add.png') no-repeat right 17px;
}
Third option: don't worry too much about csslint. 第三种选择:不要过于担心csslint。 It's there to help you, not make you jump through hoops.
它可以帮助你,而不是让你跳过篮球。 Your code will work great either way.
您的代码无论如何都会很好用。
Hope it helped. 希望它有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.