html - 使用 HTML/CSS(响应式)重新创建背景图像信息栏

Question

我希望重新创建此 example 中使用的背景图像.正如您目前所看到的，它只是使用一个类和一些定位来显示相关的威胁图标。我需要仅使用 HTML 和 CSS 重新创建它并使其响应式工作，但我正在努力从哪里开始或者什么是提供响应式跨浏览器解决方案的最佳实践。

如果需要，我愿意改变它，主要是它能清楚地显示信息。显然，它需要在较小的分辨率下工作，它可能会堆叠在顶部或显示在两行，每行三行等。我曾尝试在 Google 上搜索灵感，但可能由于我不正确的搜索措辞，它带来了混合或不相关的结果。

我能找到的最接近的东西是进度条。我已经上传图片到this codepen example

<div class="main-content" data-off-canvas-content>
  <div class="row">
   <div class="medium-12 columns">
     <h2>Threat Level</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint molestiae dolorum doloremque veritatis necessitatibus cumque nulla optio dolor, aspernatur libero facere, illum, minima saepe. Repellendus neque hic, laudantium impedit veritatis.</p>
   </div>
    <img src="http://s2.postimg.org/9bao4c64p/threat_status.png" alt="" />
  </div>
  </div>

如果有人能指出代码解决方案/片段或类似教程/进一步阅读的方向，我将不胜感激。

Answer 1

给你:

http://codepen.io/anon/pen/qbxOBV

请查看 css 并阅读位置和背景。此方法的关键是容器将图像设置为背景，并且背景大小已调整，因此它在栏下方被剪切，因此只有栏可见。然后将包含圆的元素放置为 ABSOLUTE(因此将父级设置为相对)，以便它可以在其父元素内以绝对坐标放置。然后，您只需“剪下”图像中您想要的部分即可。

这样做是为了只需要加载一张图片，就可以在多个地方使用它，这样可以节省大量带宽。程序员的努力。

HTML:

<div class="main-content" data-off-canvas-content>

  <div class="row">
    <div class="medium-12 columns">
      <h2>Threat Level</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint molestiae dolorum doloremque veritatis necessitatibus cumque nulla optio dolor, aspernatur libero facere, illum, minima saepe. Repellendus neque hic, laudantium impedit veritatis.</p>
    </div>

  </div>

  <div class="row">
      <div class="barContainer">
        <span class="threatLevel">
        </span>
      </div>
  </div>

</div>

CSS:

.barContainer {
  position: relative;
  width: 590px;
  height: 31px;
  background-image: url(http://s2.postimg.org/9bao4c64p/threat_status.png);
  background-repeat: no-repeat;
  margin: 44px 0 56px;  
}

.threatLevel {
   background: url(http://s2.postimg.org/9bao4c64p/threat_status.png) 0 -31px no-repeat;
   position: absolute;
   width: 98px;
   height: 90px;
   top: -31px;
}

然后将 CSS 更改为:

.threatLevel {
   background: url(http://s2.postimg.org/9bao4c64p/threat_status.png) -100px -31px no-repeat;
   position: absolute;
   width: 98px;
   height: 90px;
   top: -31px;
  left: 100px;
}

看看会发生什么。