更改使用css + png编译的按钮状态

Question

我试图以最有效的方式为我的按钮创建样式。我有一个名为.button-small类，包含所有的颜色和变暗的按钮：

.button-small { 
background: linear-gradient(to bottom, #59aeee 1%,#4ea0dc 100%); /* W3C */ 
border-radius: 3px; 
cursor: pointer; 
width: 20px; 
height: 20px; 
} 

的那类，我想添加所有所需的状态，.button-small:active等

现在这是一个简单的零件，接下来的斗争。我有几个按钮和所有的人有不同的PNG文件，所以我决定创建单独的类，将容纳约图像URL只有更多的信息，那就是：

.user-chat { 
background: url('images/userchat.png') center center no-repeat; 
} 

与上面的问题是，一旦应用到HTML代码<div class="button-small user-chat"></div>,background:房产正在剥离关于主类.button-small类的颜色的信息。我知道我可以对后台的代码，这是我以前做了补充信息：

.user-chat { 
background: url('images/userchat.png') center center no-repeat, linear-gradient(to bottom, #73b5e7 1%,#429be0 100%)` 
} 

但不是以不同的按钮状态添加到代码中，我不得不重复每个按钮的代码，因为我有大约30个，这不会很有效。

所以我真正要做的是一行代码，它允许我在按钮的顶部插入不同的透明背景PNG图像，而不管按钮的状态如何。有没有这样的事情，如果没有，那么完成工作最有效的方法是什么？

Answer 1

您不妨考虑使用伪元素。当我需要多个背景图像时，我通常会这样做。

你可以做类似的措施：

.button-small { 
    position: relative; /* So we can position our ::before element as needed */ 
} 

/* Generic styles for pseudo elements */ 
.button-small::before { 
    content: ''; /* required for pseudo elements to work */ 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 

/* You would now add your additional classes */ 
.user-chat::before { 
    background: url(../something/goes/here.png) center center no-repeat; 
} 

此代码应该工作在IE9向上。如果您支持IE8，请使用:before而不是::before。

对于悬停和活动状态，你可以这样做：

.user-chat:hover::before, 
.user-chat:active::before, 
.user-chat:focus::before { 
    background-image: url(new/image.png); 
    /* Only need to override the image URL if position stays the same */ 
}