javascript - 我可以将背景图像的一部分用作单独的 div 吗？

Question

我认为标题涵盖了所有内容。可以将 HTML(javascript、jquery)页面的 1600x1200 背景图像的 40x40 部分用作另一个 div。我的意思是我将图像的 40x40 部分设置为一个 div，id 为“div1”，其他部分依此类推。这个想法是，将 div 设置为背景图像，这样如果使用“适合”功能从较小的屏幕观看，就不会错位。我希望你明白这一点。

最好的问候。

Answer 1

jsFiddle

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;
}

---

注意事项

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

---

引用资料:

• > http://www.guistuff.com/css/css_imagetech1.html

  ---

Demo pulled from Reference

CSS

.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/>