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个代码，所以效率不高。< / p>

所以我真正想到的是一行代码，允许我在按钮顶部插入不同的透明背景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 */
}

更改使用css + png构建的按钮的状态

1 个答案: