Question

我注意到unfuddle.com上的按钮使用了一层噪音，我只是想知道这是什么目的，我无法明显地注意到差异，但也许这是一些跨浏览器黑客攻击？

构建这样一个非常棒的CSS3按钮似乎很愚蠢，它只使用无图像来加载噪声图像。

这是他们的CSS与有问题的按钮一起使用，请注意gnoise.png？cbv-1346878364

.gp_button, a.gp_button, input.gp_button:not([type="radio"]) {
    background-color: #C0EB00;
    background-image: radial-gradient(at center center , #7EBD00 20%, #77B300 80%), url("/images/gnoise.png?cbv=1346878364");
    border-color: #7FBF00;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
    color: #FFFFFF;
    display: inline-block;
    font-family: "Lato","Arial",sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 34px;
    margin-right: 1px;
    padding: 0 1em;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.gp_button:hover, a.gp_button:hover, input.gp_button:hover:not([type="radio"]) {
    background-color: #A5C416;
    background-image: radial-gradient(at center center , #85C700 20%, #7EBD00 80%), url("/images/gnoise.png?cbv=1346878364");
    border-color: #7FBF00;
}
.gp_button:visited, a.gp_button:visited, input.gp_button:visited:not([type="radio"]) {
    background-color: #C0EB00;
    background-image: radial-gradient(at center center , #7EBD00 20%, #77B300 80%), url("/images/gnoise.png?cbv=1346878364");
    border-color: #7FBF00;
}
.gp_button:active, a.gp_button:active, input.gp_button:active:not([type="radio"]) {
    background-color: #C0EB00;
    background-image: radial-gradient(at center center , #7EBD00 20%, #77B300 80%), url("/images/gnoise.png?cbv=1346878364");
    border-color: #90D900;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.1);
}
.oldie .gp_button, .oldie a.gp_button, .oldie input.gp_button:not([type="radio"]) {
    background-color: #7EBD00;
    border-color: #7FBF00;
    border-radius: 4px 4px 4px 4px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
    color: #FFFFFF;
    display: inline-block;
    font-family: "Lato","Arial",sans-serif;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 34px;
    margin-right: 1px;
    padding: 0 1em;
    text-decoration: none;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
}
.oldie .gp_button:hover, .oldie a.gp_button:hover, .oldie input.gp_button:hover:not([type="radio"]) {
    background-color: #85C700;
}
.oldie .gp_button:visited, .oldie a.gp_button:visited, .oldie input.gp_button:visited:not([type="radio"]) {
    background-color: #7EBD00;
}
.oldie .gp_button:active, .oldie a.gp_button:active, .oldie input.gp_button:active:not([type="radio"]) {
    background-color: #7EBD00;
    border-color: #90D900;
}

Answer 1

我的猜测是它可能适用于不支持CSS3的浏览器。然而，当我检查镀铬中的按钮时，它被另一张图像覆盖，这让我相信情况并非如此。

如果不适合旧浏览器那么可能只是编码错误。也许他们在某个时候使用它而忘记把它拿出来。

但要回答你的问题。它不用于任何东西，因为它已被此图像覆盖。如果你想复制他们正在做的事情，那么我就把它删除。

background-image: -webkit-radial-gradient(center center, #7ebd00 20%,#77b300 80%),url('/images/gnoise.png?cbv=1346878364');

Answer 2

gnoise.png除了背景颜色（以及径向渐变）之外，还为平面图像添加了一些视觉复杂性。效果在a.gp_button上几乎看不到，但如果您使用Photoshop放大屏幕截图，或者使用吸管比较像素颜色，则可以看到效果。效果在<footer>元素上更明显，因为它的背景颜色较深。

通过在纯色上重复使用一个图像，它们可以获得多种颜色，同时避免多个HTTP请求，这可能会减慢页面加载速度。

这只是一个猜测，但get参数（?cbv=1346878364）可用于确保在更新图像文件后，实际从服务器提取新图像文件而不是使用浏览器 - 缓存版本。

将噪声图像混合到CSS按钮中的目的是什么？

2 个答案: