如何将背景图像代码从 .css 文件移动到 .html 文件？答案

【问题标题】：How to move background-image code from .css file to .html file?如何将背景图像代码从 .css 文件移动到 .html 文件？
【发布时间】：2016-05-31 06:06:41
【问题描述】：

所以，我想将背景图像的代码从 .css 移动到 .html 文件。当我这样做时，图像不会显示在我的网站上。

当我使用以下内容时，图像（item.png）正确显示。

HTML：

<div class="resource_select">

CSS：

.resource_select {
  margin-bottom:5px;
  background-position: 482px -2px;
}

但是我想使用下面的代码，但是当我这样做时，图像没有显示。代码如下：

HTML：

<div class="resource_select" style="background-image: url(img/item.png);">`

CSS：

.resource_select {
  margin-bottom:5px;
  background-position: 482px -2px; 
}

我的文件夹结构如下：

index.html
style.css
/img

有人可以帮我解决这个问题吗？我做错了什么？

【问题讨论】：

我认为图像路径有问题，将路径设为相对 index.html 文件
你能分享一下为什么你想这样做吗？也许还有另一种方法。在 HTML 中添加 CSS 通常是不好的做法。您是否对应用于该元素的样式有问题？
@Sergey 处理内容，如图像，在标记中是一个不错的做法，就像处理 img src="" 一样......所以在这种情况下，样式属性仅用于内容，而不是一般样式
@Sergey 我需要这样做，因为我打算在更多的小众网站上使用此代码，并且我不想每次都更改 .css 文件来更改图像路径。我只会在 .html 文件中更改它，它会让我的事情变得更容易。
您的问题比较混乱，请您自己通读一遍并更正：您描述的第一种情况（即HTML和CSS代码组合）没有background-image定义

标签： html css image background-image

【解决方案1】：

当前代码：

<div class="resource_select" style="background-image: url(img/item.png);">

答案：只需添加`'` 符号

<div class="resource_select" style="background-image: url('img/item.png');">

【讨论】：

【解决方案2】：

当您使用background-image: url(); 时，您应该将'' 添加到()。

示例

background-image: url('img/item.png');

删除style=""并添加这个

style="background-image: url('img/item.png');"

提示：当在 HTML 中使用 style=" " 并且其中有代码时，不要使用“”。用 ' ' 代替它们。当您再次使用 " 时，它将在您的 CSS 结束之前结束样式属性。

【讨论】：

即使你有copied my answer，我也不会担心，但是人们（不是你）给了这个 3 票，为我 -1 票，你已经简要解释了，但是您可以编辑我的答案并进行解释，不仅是您，而且大多数答案都说了我在 2 月 5 日所说的话?
@Neptotech-vishnu 问题是编辑被放置在审查队列中，并且经常因为“与作者的意图相冲突”或“试图回复”而被拒绝。唯一能保证没有的方法是作者在审稿人之前看到它。

【解决方案3】：

你可以使用

background: url(img/item.png) 482px -2px;

如果图像在正确的位置，这应该可以工作

https://codepen.io/marcosefrem/pen/ZEaBbRM

【讨论】：

【解决方案4】：

即使您没有输入'，现代浏览器也会显示图像，但是，如果您的 <div> 没有任何内容或没有指定高度，则不会显示背景图像，因为 <div> 没有高度。

【讨论】：

【解决方案5】：

.resource_select {
    margin-bottom:5px;
    background-position: 482px -2px; 
    background-repeat: no-repeat;
  }

<div class="resource_select">
  <img src="https://via.placeholder.com/300/444" alt="">
 
</div>

注意在 src 中给出你的 img 文件的路径，你的图像将被显示

【讨论】：

你为什么这样做我的代码是正确的，代码也能正常工作。如果您不喜欢我的回答，请不要给我投票。您只需忽略我的回答即可。
background-image 与 <img> 不同。见stackoverflow.com/questions/492809/…

【解决方案6】：

高度缺失可能是问题所在，如果您使用容器，您可以将其添加为 height:inherit 或者如果您想要一个完整的页面背景添加 height:100vh。您也可以使用 px 中的固定高度值。

<div class="resource_select" style="height:inherit; background-image: url(img/item.png);"></div>

【讨论】：

【解决方案7】：

您的代码中缺少的不是在单引号 (') 内添加图像路径，正如大多数人（错误地）在此处发布的那样。现在大多数浏览器都会显示图片，即使你不使用'。

真正缺少的是指定<div> 元素的width 和height。下面使用here 描述的技术使背景图像像img 元素一样工作，以便它自动调整其height。您可以根据需要调整padding-top 百分比值以获得所需的输出。另外，如果您想了解更多关于background-size 属性的信息，请查看this。

<div class="resource_select" style="background-image: url('img/item.png'); background-size: contain; background-repeat: no-repeat; width: 100%; height: 0; padding-top: 30%;">

下面是一个完整的工作示例，展示了如何在背景图像中添加一些内容。为此，应将position:relative 设置为background-image 的div，并在其中添加带有position:absolute; 设置的HTML 元素。调整内部元素的top、left等属性将相对于父元素（即div的background-image）。可以选择在内联样式中将image-rendering 设置为pixelated（即style="image-rendering: pixelated; position:relative...），以保留原始像素化形式。

<!DOCTYPE html>
<html>
  <head>
    <style>
      .resource_select {
        margin-bottom: 5px;
        top: -2px;
        left: 482px;
      }
    </style>
  </head>
  <body>
    <h2>Background Image Example</h2>
    <div class="resource_select" style="position:relative; background-image: url('img/item.png'); background-size: contain; background-repeat: no-repeat; width: 100%; height: 0; padding-top: 30%;">
      <div style="position:absolute; top:20px; bottom:0px; left:100px; right:0px;">
        <p>This is some sample text within the <b>background image</b></p>
        <p>This is another sample text within the <b>background image</b></p>
      </div>
    </div>
  </body>
</html>

【讨论】：

【解决方案8】：

您需要设置一个高度，这是缺少的。如果您在 div 中放置一些内容，它将显示您的背景图片。

如果在 div 中添加图片以获取与背景图片相同的高度：

<div class="resource_select" style="background-image: url(https://via.placeholder.com/500);"><img src="https://via.placeholder.com/500"></div>

然后你可以用 opacity: 0 隐藏它

.resource_select img{
opacity: 0;
}

参见 JSFiddle 示例：https://jsfiddle.net/ruben/od9w4rut/20/

【讨论】：

【解决方案9】：

也许是因为您还必须使用背景位置属性

<div class="resource_select" style="background-image: url('img/item.png'); 
background-position: 482px -2px">

【讨论】：

当前代码：

答案：只需添加' 符号

示例

答案：只需添加`'` 符号