在图片上设置9个矩形的背景位置

Question

Hello社区，

首先，请原谅我糟糕的油漆技巧;）

这个想法是为CSS中的背景位置选择9个相等矩形中的一个。 图像的上传者应该有机会将背景位置设置为动机所在的位置。

例如：在左图中，图像的右上角会有一只蝴蝶。所以他/她会点击右上方的矩形来标记＆＃34;标记＆＃34; ＆＃34;锚＆＃34;对于这张照片的背景位置。这是必要的，因为全屏背景的图像非常大。如果用户在手机上查看网站，蝴蝶应该始终在那里。这就是为什么我开始创建这个矩形。

我的问题是：我该怎么做？

一些想法：

• 创建一个DIV容器并将图像作为背景
• 创建9个较小的div，每个33.3％宽，33.3％高
• 为每个div提供jQuery可以访问该值的属性（例如＆＃34;左上角＆＃34;或＆＃34; center-center＆＃34;）并将值存储在数据库中
• 应在点击图片后立即设置更改（jQuery onClick）。这意味着，上传者应该有一点预览。

有一个网站几乎可以击败我想拥有的东西，但只有3个不同的＆＃34;矩形＆＃34; （顶部，中间，底部）：http://vegas.jaysalvat.com/documentation/background/

我不想让你给我一个完整的示例代码，我只想知道＆＃34; clean＆＃34;这个解决方案将是或任何提示。

非常感谢。

克里斯

编辑：为了更好地解释这里一个真实的例子：

如您所见，动机位于图像的右上角。当我点击右上角的矩形时，该图像的背景位置应设置为（在CSS中）：

background-position: top right;

此操作有助于设置移动设备或平板电脑的背景位置，因为图像比这些设备的显示大。 Please check the URL above并检查右侧的小图像（您可能需要向下滚动一下。）用鼠标悬停图像并单击3个矩形中的一个。