我如何在标记中指定我的背景图像

Question

我有一些不是我写的代码，目前有一个 background-image。我想保持准确的外观，但我不想在 CSS 中设置图像，而是想在我的标记中设置它，但我不知道如何设置。

这是当前在 CSS

中设置图像的方式

.clean-topbar{
    background-image:url(http://www.elpasodeventa.com/mls_content/gep/photos/818802/20191118214112529586000000-o.jpg);
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover;
    position: relative;
    height:200px;
}

这是显示图像的标记部分：

<div class="clean-topbar">
...

请帮助我在我的 HTML 标记中指定图像而不是 CSS。这是一个 fiddle:

https://jsfiddle.net/carolinebeltran/vmgq1ena/13/

Answer 1

您可以使用内联 css <div style="background-image:url(http://www.elpaso...);">

Answer 2

您可以使用 <img> 标签。 check the docs

Answer 3

如果您的意思是要避免使用背景图像并单独 CSS，而是仅在 HTML 中使用 img 标记和内联样式，那将是

<div><img src="http://www.elpasodeventa.com/mls_content/gep/photos/818802/20191118214112529586000000-o.jpg" style="height:200px;object-fit:cover;"></div>

但是，如果您只是想将外部 CSS 移动到内联样式，那就是

<div style="background-image:url(http://www.elpasodeventa.com/mls_content/gep/photos/818802/20191118214112529586000000-o.jpg); background-repeat:no-repeat;        background-position:center;background-size:cover;position: relative;height:200px;">...</div>

Answer 4

只需使用一个 <img /> 标签，并添加一个 css class，它提供来自其他代码的 width/height。之后就可以使用src="" 属性插入图片的link了

Answer 5

扩展phoenixstudio的答案，你可以做的是像这样指定内联背景图像样式

<div class="clean-topbar" style="background-image:url()">

</div>

然后在你的CSS控制背景的显示方式：

.clean-topbar {
   background-repeat: no-repeat;
   background-position: center center;
   background-size: cover; // or contain whichever serves you
}

对您来说，一个不错的选择是使用 Vanilla Lazyload 来减少加载时间并提高页面速度。

我如何在标记中指定我的背景图像

How do I specify my background-image in markup instead

css

background-image

bootstrap-4