Question

我有一个样式为按钮的链接，但我想将图像添加到此按钮而不复制相同的CSS。我有一个没有图像的版本，然后是一个带有编辑＆＃39;图标，一个带有＆＃39;删除＆＃39;图标。所以......基本上我有三个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;
}

DEMO：http://jsfiddle.net/BnE82/

请注意重复/共享代码如何在一个类中，并且我们将独特的部分分解为单独的类。 HTML元素分配了多个类;重复/共享类（button）和它们自己的独立项的单独类。

结合起来，他们创造了完整的效果！

Answer 2

你尝试了多个课程吗？

即。有你的按钮类

.buttonClass {
    -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-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;
}

然后为每个项目（即删除，编辑等）提供单独的类

.delete {
    background-image: url('delete-page-red.gif');
}

.edit {
    background-image: url('edit-yellow.gif');
}

然后在你的按钮上，你将按如下方式设置类：

<input type="button" value="Delete" class="buttonClass delete" />
<input type="button" value="Edit" class="buttonClass edit" />

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

2 个答案:

HTML

CSS