1

我正在构建一个通过静态生成器（Gridsome，盖茨比替代品）生成的网站。这个静态站点生成器的特点之一是它输出优化的渐进图像（实时调整大小和裁剪）。

典型的图像组件如下所示：

<g-image src="~/image.png" width="500"/>

~是我的 /src/文件夹的别名。

有关如何使用此组件的更多详细信息的文档在这里：Gridsome -- Images

话虽如此，我想将我的 CSS 背景图像转换为<img>元素，以便我可以利用进度图像功能。有谁知道我可以如何转换下面的 CSS 并将图像放入<g-image>元素中？注意：出于艺术原因，我使用 CSS 伪属性来倾斜标题。

这是我的代码（使用JSFIDDLE）：

HTML：

  <header class="header">
    <div class="container">
    <aside class="h1 tagline"><em>We are ACME.
      <br /> Some tagline</em>
      </aside>
      <p class="text-white pad">Snappy text here to explain more about this site.</p>
  </div>
</header>

CSS：

.header {
    position: relative;
    width: 100%;
  height: 40em;
  text-transform: uppercase;
}

/* Create angled background with 'before' pseudo-element */
.header::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: 6em;
    width: 100%;
    height: 50em;
    z-index: -1;
    transform: skewY(-3.5deg);
    background: linear-gradient(to left,rgba(0, 0, 0, 0), rgba(0,0,0,1)), url('https://www.fillmurray.com/g/2000/1000') no-repeat left 10rem;
}
4

0 回答 0