html - 如何从 HTML 而不是 CSS 调用图像 URL？

Question

我正在为我公司的网站制作 CMS。我们有一个要求。我们需要设计一个页面的标题。图片需要从 CMS 更改。为了实现这一点，我需要从 HTML 而不是 CSS 调用图像。

下面是我的代码:

html, body {
  width: 100%;
  height: 100%;
}

.bg-img {
  position: relative;
  width: 100%;
  height: 100%;
  background: url('http://unsplash.it/1200x800') center center no-repeat;
  background-size: cover;
  
  &:before {
    content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: linear-gradient(to bottom right,#002f4b,#dc4225);
	opacity: .6; 
  }
}

<div class="bg-img"></div>

1. 需要从html调用图片URL
2. 不知道为什么代码在 Stack Overflow 中不工作，但在我的 codepen here 中工作

Answer 1

你必须使用 style 属性:

<div class="bg-img" style="background-image: url('http://unsplash.it/1200x800');"></div>