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

2019年7月27日 178次阅读

我有以下codepen – 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等 – 但它没有响应.

救命 ：)

最佳答案 DEMO

使用背景大小,高度与相对单位像我使用大众

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>
点赞