Question

我有CSS文件中的内容，例如：

/* Total counts - mini icons */
span.count-facebook {
background: #fff url(../images/mini-icons/facebook.png) no-repeat 1px center;
}
span.count-plusone {
background: #fff url(../images/mini-icons/plusone.png) no-repeat 1px center;
}
span.count-twitter {
background: #fff url(../images/mini-icons/twitter.png) no-repeat 1px center;
}
span.count-linkedin {
background: #fff url(../images/mini-icons/linkedin.png) no-repeat 1px center;
}
span.count-stumble {
background: #fff url(../images/mini-icons/stumble.png) no-repeat 1px center;
}
span.count-digg {
background: #fff url(../images/mini-icons/digg.png) no-repeat 1px center;
}
span.count-delicious {
background: #fff url(../images/mini-icons/delicious.png) no-repeat 1px center;
}
span.count-pinit {
background: #fff url(../images/mini-icons/pinit.png) no-repeat 1px center;
}
span.count-reddit {
background: #fff url(../images/mini-icons/reddit.png) no-repeat 1px center;
}

这些图标，facebook.png和plusone.png等都是24px x 24px ...我假设只增加高度：24;宽度：24;对于每个.png实例都与实际图像无关，尽管我可能错了。

我是否可以为实际背景图像添加高度和宽度属性？谢谢！

Answer 1

有一种方法可以缩小您的代码，如下所示。

span.count-facebook, span.count-plusone{width:24px; height:24px;}

span.count-facebook {background: #fff url(../images/mini-icons/facebook.png) no-repeat 1px center;}
span.count-plusone {background: #fff url(../images/mini-icons/plusone.png) no-repeat 1px center;}

您可以做的只是将width和height添加到所有类中，因为只需添加, (comma)即可。这样可以减少您添加width和height。

的所有时间

在使用width和height声明图标的类后，您只需通过更改所有.png名称来重新声明它们。

另一种解决方案是创建一个图像精灵，并为所有相同的重新声明的类声明image width和height维度background-position上方。

希望这有帮助。

在CSS中为背景图像指定图像尺寸的正确方法是什么？

1 个答案: