小编Joh*_*n R的帖子

我在网站上有几个SVG背景。它们的大小小于50kb，但是加载速度很慢，或者它们似乎是网站上的最后一个元素。由于它们位于页面的页眉上，因此在加载图像时我不需要空格。我一直在尝试寻找答案或原因，以解决此问题并优化svg，但似乎找不到解决方案。我的背景为白色约2-3秒，然后出现SVG。

我正在CSS中内联加载SVG

这就是我的HTML

<div class='header-main'>
  <div class="header">
    <hr></hr>
    <h1 class="tagline">Some Text</h1>
  </div>
</div>

加载SVG的CSS为：

.header-main {
  background: url('{{ asset "/img/background-main.svg"}}');
}

我希望这个特定HR的宽度与任何屏幕尺寸上方的"LARGER HEADER LIKE"相同.我有一个小于245px的默认宽度,但对于这个特定的宽度,我希望与任何屏幕尺寸的上面文本的宽度相同

hr {
  border-top: 0px solid blue !important;
  padding: 0;
  margin-top: 0.5em !important;
  border-width: 6px !important;
  width: 245px;
}

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
    <div class="container">
       <div class="row text-center">
          <h1>HEADER 1</h1>
       </div>
       <div class="row text-center">
          <h1>LARGER HEADER LIKE THIS</h1>
          <hr>
       </div>