Question

我有以下代码集 - http://codepen.io/anon/pen/PPLeRV?editors=110

我创建了一个SVG精灵 - 来自icomoon并将其用作背景图像类。我需要知道如何使其响应。

HTML

<a class="icon icon-home" href="#"></a>
<a class="icon icon-books" href="#"></a>
<a class="icon icon-folder-open" href="#"></a>
<a class="icon icon-location2" href="#"></a>

CSS

.icon {
    display: inline-block;
    background-repeat: no-repeat;
    background-image: url(http://imgh.us/sprite_4.svg);
}
.icon-home {
    width: 96px;
    height: 96px;
    background-position: 0 0;
}
.icon-play {
    width: 96px;
    height: 96px;
    background-position: -112px 0;
}
.icon-clubs {
    width: 96px;
    height: 96px;
    background-position: -224px 0;
}
.icon-books {
    width: 108px;
    height: 96px;
    background-position: -336px 0;
}
.icon-folder-open {
    width: 96px;
    height: 96px;
    background-position: -560px 0;
}
.icon-location2 {
    width: 96px;
    height: 96px;
    background-position: -672px 0;
}

不幸的是 - 当我使用这些图像时，它不适用于不同的媒体类型。我可以使用媒体查询 - 但缩放功能不能正常工作。

我正在使用此函数来减少http请求 - 精灵和所有，而不是单个图像网址。

我尝试将它们放在弹性盒子中 - 而div等 - 但它没有响应。

帮助：）

Answer 1

DEMO

使用背景大小，高度和相对单位，就像我使用vw

一样

1vw = 1% of viewport width

所以当我broswer调整你的身高（在Vw中）根据broswer宽度变化它支持主要Broswer Firefox，Chrome但IE我不知道

.icon {
  display: inline-block;
  background-repeat: no-repeat;
  background-image: url("http://imgh.us/sprite_4.svg");
  border: 1px solid grey;
  width: 100%;
  height: 20vw;
  max-width: 10%;
  background-size: 80vw 20vw;
}
.icon-home {
  background-position: left -1% bottom 0px;
}
.icon-books {
  background-position: left 43% bottom 0px;
}
.icon-folder-open {
  background-position: left 72% bottom 0px;
}
.icon-location2 {
  background-position: left 87% bottom 0px;
}

<a class="icon icon-home" href="#"></a>
<a class="icon icon-books" href="#"></a>
<a class="icon icon-folder-open" href="#"></a>
<a class="icon icon-location2" href="#"></a>

Answer 2

将background-size与媒体查询一起使用。下面给出一个例子。

我在css中添加了以下代码。它对我有用。

* {
    padding: 0;
    border: 0;
    margin: 0;
    outline: 0;
}
@media screen and (max-width:450px) {
    .icon {
        background-size: 100vw 11vw;
    }
    .icon-home, .icon-play, .icon-clubs, .icon-books, .icon-folder-open, .icon-location2 {
        width: 11vw;
        height: 11vw;
    }
    .icon-home {
        background-position: 0 0;
    }
    .icon-play {
        background-position: -14vw 0;
    }
    .icon-clubs {
        background-position: -27vw 0;
    }
    .icon-books {
        background-position: -41vw 0;
    }
    .icon-folder-open {
        background-position: -64vw 0;
    }
    .icon-location2 {
        background-position: -78vw 0;
    }
}

HTML

<a class="icon icon-home" href="#"></a>
<a class="icon icon-books" href="#"></a>
<a class="icon icon-folder-open" href="#"></a>
<a class="icon icon-location2" href="#"></a>

注意：我使用

删除任何默认边距，填充，边框和轮廓

如何通过“类”响应来包含背景图像

2 个答案: