html - CSS Button 链接添加多个不同的图像

Question

我有一个样式为按钮的链接，但我想在不复制相同 CSS 的情况下向该按钮添加图像。我有一个没有图像的版本，一个带有“编辑”图标的版本，一个带有“删除”图标的版本。所以...基本上我有 95% 相同的三个 CSS 类，除了背景图像属性。这是编辑和删除按钮:

.deleteButtonClass2 {
    -moz-box-shadow: inset 1px 1px 1px 0px #97c4fe;
    -webkit-box-shadow: inset 1px 1px 1px 0px #97c4fe;
    box-shadow: inset 1px 1px 1px 0px #97c4fe;
    background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ff7f00), color-stop(1, #bf5f00) );
    background: -moz-linear-gradient( center top, #ff7f00 5%, #bf5f00 100% );
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7f00', endColorstr='#bf5f00');
    background-image: url('delete-page-red.gif');
    background-repeat: no-repeat;
    background-position-x: 4px;
    background-position-y: center;
    background-color: #ff7f00;
    -webkit-border-top-left-radius: 8px;
    -moz-border-radius-topleft: 8px;
    border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    -moz-border-radius-topright: 8px;
    border-top-right-radius: 8px;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-bottomright: 8px;
    border-bottom-right-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-radius-bottomleft: 8px;
    border-bottom-left-radius: 8px;
    text-indent: 0;
    border: 1px solid #331900;
    display: inline-block;
    color: #ffffff;
    font-family: Arial;
    font-size: 11px;
    font-weight: bold;
    font-style: normal;
    height: 22px;
    line-height: 22px;
    width: auto;
    padding: 0px 10px 0px 20px;
    text-decoration: none;
    text-align: center;
    text-shadow: 1px 1px 0px #1570cd;
}


.editButtonClass2 {
    ......
    background-image: url('edit-yellow.gif');   <-- Only Difference 
    ..........
}

如何减少 CSS，以便在我决定更改按钮颜色时，没有那么多地方可以更改？

Answer 1

你使用了多个类!这是校长

HTML

<div class="button edit"></div>
<div class="button delete"></div>

CSS

.button {
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

.edit {
  background-color: blue;
}

.delete {
  background-color: green;
}

演示:http://jsfiddle.net/BnE82/

请注意重复/共享代码是如何在一个类中的，我们将独特的部分分解为单独的类。 HTML 元素被分配了多个类；重复/共享类(按钮)和它们自己的独特元素的单独类。

它们结合起来创造出完整的效果!