html - 在 HTML 中调用背景图片进行动态加载

Question

我想知道是否有可能在 HTML 文档中有一个表现得像背景图像的图像(目前在 CSS 中完成)？原因是客户可以通过 CMS 上传背景图片，而不是我必须在 CSS 中为客户手动上传(他们无权访问)。

这是我想要创建的效果:http://codepen.io/anon/pen/wabjyg

HTML

<div>
  <h1>An example of text over an image</h1>
</div>

CSS

div {
  background: url(http://lorempixel.com/g/1100/300/) no-repeat;
  width:100%;
  height:100%;
  background-size:cover;
  }

这样做的一个方法是将背景图像作为这样的内联样式... http://codepen.io/anon/pen/aOrGYX - 这样我就可以在模板中创建动态标签，提取他们在 CMS 中上传的图片路径。

HTML

<div style="background-image: url('http://lorempixel.com/g/1100/300')">
  <h1>An example of text over an image</h1>
</div>

CSS

div {
  background-repeat: no-repeat;
  width:100%;
  height:100%;
  background-size:cover;
  position:relative;
}

只是想知道是否有另一种不在 HTML 标记中使用内联样式的方法？也许欺骗 IMG 标签使其表现得像背景图片？

Answer 1

你可以使用 object-fit让 img 表现得像背景图片:

html, body {
  height:100%;
  margin:0;
  padding:0;
}

div {
  background-repeat: no-repeat;
  width:100%;
  height:100%;
  position: relative;
}

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

h1 {
  font-family:sans-serif;
  margin:0;
  color:#fff;
  position:absolute;
  letter-spacing:-1px;
  text-align:center;
  left:50%;
  top:50%;
   text-shadow:0 0 30px rgba(0,0,0,0.8);
  -webkit-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
  -webkit-transform: translateX(-50%);
  	-ms-transform: translateX(-50%);
  	transform: translateX(-50%);
}

<div>
  <img src="http://lorempixel.com/g/1100/300">
  <h1>An example of text over an image</h1>
</div>