0

我注意到 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;
}
4

2 回答 2

1

我的猜测是它可能存在于不支持 CSS3 的浏览器中。但是，当我检查 chrome 中的按钮时，它会被另一个图像覆盖，这让我相信情况并非如此。

如果旧浏览器不存在，那么很可能只是编码错误。也许他们在某个时候使用它并忘记将其取出。

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

background-image: -webkit-radial-gradient(center center, #7ebd00 20%,#77b300 80%),url('/images/gnoise.png?cbv=1346878364');
于 2013-01-30T22:04:07.453 回答
1

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

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

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

于 2013-01-30T22:13:23.557 回答