3

我有一个使用以下调色板实现基本 MS-Paint 类型功能的页面：

在此处输入图像描述

选择工具时，将显示灰色轮廓。

目前，带有灰色轮廓的窗口图像被设置为窗口 div 的背景。各个工具位于一个单独的图像上：

在此处输入图像描述在此处输入图像描述

当我开始为窗口设置样式时，每个工具都使用这种性质的 css 进行绝对定位：

#sketchpad_tools .tool.paintbrush {
     background: url(../images/sketchpad/selected_tools.png) no-repeat -15px -80px;
     top: 90px; left: 10px;
     height: 100px;
     width: 100px;
}

这需要我观察每个位置，调整 top 和 left 属性，然后在工具所在的背景图像中找到正确的位置。事实证明，这是一项非常耗时的任务。如果我决定缩小图像的背景尺寸——我不得不多次这样做——完成任务的时间就会增加一倍。

有没有更高效的方法来快速设计这种功能？

4

1 回答 1

1

为什么不使用带有阴影的调色板的背景图像，而不是为每个工具选择一个选定的图像（灰色）而不是选定的图像（颜色）呢？选择该工具时，只需隐藏彩色图像并显示灰色版本。

如果您将图像（没有定位）放在宽度设置为调色板的 DIV 中，那么当超出 DIV 宽度时，它们应该自动换行。

请参阅此处的 JSFiddle 示例，显示图像如何包装在 DIV 中，只需设置它的宽度。

您只需要在和中添加图片链接的代码示例：

<DIV style="width: 300px;">
    <p>My Toolbox</p>
    <img src="Tool1_Image_Location_Grey" />
    <img src="Tool2_Image_Location_Color" />
    <img src="Tool3_Image_Location_Color" />
    <img src="Tool4_Image_Location_Color" />
    <img src="Tool5_Image_Location_Color" />
</DIV>
于 2013-04-12T14:34:52.080 回答