Question

我想创建一个包含很多按钮的网页。这些按钮上会有一个“生锈”的外观。为了避免所有按钮看起来完全相同的问题，我正在考虑创建一个模式的sprite png，然后让每个按钮选择同一个sprite的其他坐标。

这是可行的，如果是这样的话？（我的猜测是，这可能涉及jquery / javascript ..）

该页面上的简单代码（此刻）：

<style>
button {
background-image: url("/cssspriteproject/rustpattern2.png");
background-position: -10px -10px;
width:100px;
height:25px;
margin-bottom:3px;
color:#fff;
font-size:10px;
}
</style>

</head>
<body>
<button>test1</button><br>
<button>test2</button><br>
<button>test3</button><br>
<button>test4</button><br>
</body>

正如您所看到的，所有按钮都具有完全相同的模式..我希望它们看起来彼此不同。现在有4个按钮，但我想使用100个按钮，所以我不想为每个按钮使用不同的类。

Answer 1

您不能只重复元素中背景图像的一部分。您可以调整背景图像的大小，以便只显示要显示的部分，然后使用background-size填充背景元素。

你要问的另一种解释是，你有一个单一模式的大图像（一个比它背景的元素大得多的图像）。然后每个按钮/元素显示该大图案的不同位。这可以通过像任何其他精灵一样使用background-position来完成。你不必在你的位置上保持准确。

Answer 2

我不知道你的编码风格，但对我来说，我会首先制作一个包含所有按钮背景的精灵，然后在默认情况下使用一个带有一个bg的按钮和一个额外的类，只需更改精灵的坐标就可以有另一个bg增加了课程。

button{
background: url(../images/sprite.png) no-repeat 0 0;
}
button.red{
background: url(../images/sprite.png) no-repeat 0 -100px;
}
button.blue{
background: url(../images/sprite.png) no-repeat -50px -150px;
}

使用www.spritecow.com

制作精灵并找到精灵的坐标

我希望这有效：）

Answer 3

用Google搜索更多内容，发现类似的内容并没有使用任何类型的背景，但基于此我开始工作：

<style type='text/css'>
button {
background-image: url("/cssspriteproject/rustpattern2.png");
width:100px;
height:25px;
margin-bottom:3px;
color:#fff;
font-size:10px;
}
</style>

<script type='text/javascript'>
$(document).ready(function () {
  $('.on').each(function() {
     var onpos = (Math.floor(Math.random()*270)) + 'px ' + (Math.floor(Math.random()*270)) + 'px';
     $(this).css('background-position', onpos);
    });
});
</script>

</head>
<body>

<button class="on">test1</button><br>
<button class="on">test2</button><br>
<button class="on">test3</button><br>
<button class="on">test4</button><br>

</body>

我在脚本中填写了图像的近似宽度和高度。由于图像不是真实的图案，因此您会看到着色的差异，但它的作用就像一个魅力：DEMO

使用模式精灵创建不同的（按钮）背景

3 个答案: