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

Question

我认为标题涵盖了所有内容。一个小的让我们说一个HTML（javascript，jquery）页面的1600x1200背景图像的40x40部分可以用作另一个div。我的意思是我拍摄了40x40的图像并将其设置为id为＃34; div1＆＃34;等等其他部分。这个想法是，div被设置为背景图像，因此如果从较小的屏幕观看，并且＃34;适合＆＃34;功能不会有错位。我希望你明白这一点。

最诚挚的问候。

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

---

注意

这使用精灵技术，应该适用于这种情况。

---

参考文献：

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

Answer 2

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

JSFiddle Example

    .big-image {
        background-image:url(http://img2.netcarshow.com/McLaren-F1_1993_1024x768_wallpaper_01.jpg);
        background-repeat:no-repeat;
        display:block;
    }
    .img-sec-1 {
        background-position: -175px -268px;
        height:40px !IMPORTANT;
        width:40px !IMPORTANT;
    }
    .img-sec-2 {
        background-position: -270px -290px;
        height:50px !IMPORTANT;
        width:50px !IMPORTANT;
    }