Javascript 我可以使用背景图像的一部分作为单独的div吗

我认为标题涵盖了一切。HTML（javascript，jquery）页面的1600x1200背景图像的一小部分40x40是否可以用作另一个div。我的意思是，我获取图像的一个40x40部分，并将其设置为id为“div1”的div，以此类推。其想法是，将div设置为背景图像，这样，如果使用“fit-in”功能从较小的屏幕观看，就不会出现错位。我希望你能明白

致以最良好的祝愿

CSS

html {
    background: url(http://placehold.it/350x150) no-repeat center center fixed;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    background-position: 0px -30px;
    width: 50px;
    height: 30px;
}

.icons {
    display: block;
    width: 40px;
    height: 40px;
    background-image: url(http://www.guistuff.com/css/images/sixicons.png);
    background-repeat: no-repeat;
}
.icon_1 {
    background-position: 0px 0px;
}
.icon_2 {
    background-position: -40px 0px;
}
.icon_3 {
    background-position: -80px 0px;
}
.icon_4 {
    background-position: 0px -40px;
}
.icon_5 {
    background-position: -40px -40px;
}
.icon_6 {
    background-position: -80px -40px;
}

---

注 这使用了sprite技术，在这种情况下应该可以正常工作

---

参考资料：

• ---

CSS

html {
    background: url(http://placehold.it/350x150) no-repeat center center fixed;

    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;

    background-position: 0px -30px;
    width: 50px;
    height: 30px;
}

.icons {
    display: block;
    width: 40px;
    height: 40px;
    background-image: url(http://www.guistuff.com/css/images/sixicons.png);
    background-repeat: no-repeat;
}
.icon_1 {
    background-position: 0px 0px;
}
.icon_2 {
    background-position: -40px 0px;
}
.icon_3 {
    background-position: -80px 0px;
}
.icon_4 {
    background-position: 0px -40px;
}
.icon_5 {
    background-position: -40px -40px;
}
.icon_6 {
    background-position: -80px -40px;
}

HTML

<span class="icons icon_1" style="float:left;"></span>
&nbsp; - Icon No.1<br/>

<span class="icons icon_2" style="float:left;"></span>
&nbsp; - Icon No.2<br/>

<span class="icons icon_3" style="float:left;"></span>
&nbsp; - Icon No.3<br/>

<span class="icons icon_4" style="float:left;"></span>
&nbsp; - Icon No.4<br/>

<span class="icons icon_5" style="float:left;"></span>
&nbsp; - Icon No.5<br/>

<span class="icons icon_6" style="float:left;"></span>
&nbsp; - Icon No.6<br/>

-图标1号

-图标2号

-图标3号

-图标4号

-图标5号

-图标6号

听起来您想将图像用作CSS图像精灵。可以在DIV上设置背景图像，然后根据需要调整背景位置

---

我的朋友，这是互联网。在这里，你可以做任何事情。祝您在这里过得愉快。我是否应该等待一个可能的实现：D。但无论如何还是要感谢：Dtry提供了一个jsfiddle。详细解释。我不知道在JSFIDLE中还可以写些什么，因为其他所有内容都与问题无关。如果我使用一些40x40像素的不可见GIF，并将它们设置为坐标，如果我在半个屏幕上打开浏览器，它们将位于相同的坐标上，但它们应该表示的图片部分将不同，因为图片将安装在屏幕中，因此更小。使用占位符图像很适合演示新div的名称。例如，如果我想将图像的某个部分命名为div1，并在以后的javascript代码中引用它？@user3095198添加了一个精灵演示，它直接从我提供的引用中提取。