Question

我有一个简单的CSS，其元素完全相同，除了背景图像的文件名。我有超过50个。我可以以某种方式将它们合并为一个使用参数的元素吗？或者其他一些此类解决方案？

.btnAdd {
    background-image:url(Images/Buttons/btnadd.png);
    background-color:transparent;   
    width:34px;     
    height:34px;          
    cursor:pointer;     
    border-style:none;   
 } 
.btnAdd:hover {
    background-image:url(Images/Buttons/btnadd_h.png); 
 } 
 .btnFilter {
    background-image:url(Images/Buttons/btnFilter.png);
    background-color:transparent;   
    width:34px;     
    height:34px;    
    cursor:pointer;     
    border-style:none;   
   } 
   .btnFilter:hover {
    background-image:url(Images/Buttons/btnFilter_h.png); 
   }
   ....
   ....

谢谢， Koby。

Answer 1

创建一个通用样式并将其添加到按钮中，如下所示。

.btnAdd {
background-image:url(Images/Buttons/btnadd.png);
} 
.btnCommon {
background-color:transparent;   
width:34px;     
height:34px;          
cursor:pointer;     
border-style:none;   
}

在你的按钮中添加如下。

 <button class="btnCommon btnAdd">Something</button>

Answer 2

CSS：

.btn {
  background-color:transparent;   
  width:34px;     
  height:34px;          
  cursor:pointer;     
  border-style:none;  
}

.btnDoSomething {
  background-image:url(Images/Buttons/btnDoSomething.png); 
}

.btnDoSomething:hover {
 background-image:url(Images/Buttons/btnDoSomething_h.png); 
}

HTML：

<button type="button" class="btn btnDoSomething">Do something</button>

Answer 3

查看jQuery UI图标（http://api.jqueryui.com/theming/icons/），看看jQuery的人是如何解决这个问题的。

主要步骤是仅创建一个背景图像，然后在显示另一个图像时更改背景位置。

.ui-icon {
width: 16px;
height: 16px;
}

.ui-icon {
background-image: url(images/ui-icons_222222_256x240.png);
}

.ui-icon-carat-1-n {
background-position: 0 0;
}

.ui-icon-carat-1-ne {
background-position: -16px 0;
}

这会加快您的网站速度，因为只需加载一张图片，之后只会改变背景位置。

Answer 4

在Css中，建议您将这个常见的CSS放在一个类中，并将不常见的部分放在不同的类中。

.btn {
  background-color:transparent;   
  width:34px;     
  height:34px;          
  cursor:pointer;     
  border-style:none;   
} 
.btn.btnAdd {
  background-image:url(Images/Buttons/btnadd.png);
} 
.btn.btnAdd:hover {
   background-image:url(Images/Buttons/btnadd_h.png); 
}

.btn.btnFilter {
   background-image:url(Images/Buttons/btnFilter.png);
}

合并CSS中的类似元素？

4 个答案: