Question

我希望重新创建此example中使用的背景图片。正如您目前所看到的那样，它只是使用一个类和一些定位来显示相关的威胁图标。我需要使用HTML＆amp; amp; 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（因此将父元素设置为相对），以便可以将其与绝对坐标放置在其父元素内。然后，你只是＆＃34;切出＆＃34;你想要的图像部分。

您这样做只需要加载一个图像，并且可以在多个位置使用它，这样可以节省大量带宽。程序员的努力很好。

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

看看会发生什么。

使用HTML / CSS重新创建背景图像信息栏（响应）

1 个答案: