Question

我目前正在使用模板，并且有一些我不理解的代码

<div class="item owl-bg-img" style="background-image:url('http://placehold.it/1920x1050');">

我不想搞乱CSS，我只想更改HTML中的代码，因为您可以看到它已链接到在线但我想链接到我的本地计算机。我有HTML和所有CSS和图片，但不知道如何链接

Answer 1

你可以简单地改变它 background-image:url('http://placehold.it/1920x1050');根据您的要求。如果要添加图像背景，请将http://placehold.it/1920x1050替换为实际图像路径。如果您想使用彩色背景，请删除background-image:url('http://placehold.it/1920x1050');并使用background: red;添加您的颜色或颜色代码而不是red

Answer 2

要链接到PC中的图像，您需要在PC中放置HTML文件，并将图像位置链接到PC上的图像位置。例：假设您在同一文件夹中有index.html和background.jpg，然后使用：

<div class="item owl-bg-img" style="background: url(/background.jpg);">

您可以使用CSS执行相同操作。

.item owl-bg-img { 
  background: url(/background.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: relative;
}

使用CSS

为整个HTML分配背景

html { 
  background: url(/background.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: relative;
}

使用IMG标签。很难将背景图像设置为DIV，也不建议这样做。

<img class="item owl-bg-img" src="/background.jpg">

然后你只需将CSS（宽度，高度等）添加到类“item owl-bg-img”中，就像你对DIV一样。

另一种方法，如果你真的需要那个DIV，

<div class="item owl-bg-img"><img src="/background.jpg"></div>

这样DIV将是您图像的大小，否则使用CSS调整DIV大小，将缩放IMG标记以适合DIV的大小。

Answer 3

首先，您需要下载要链接到本地计算机的图像，然后在背景图像内联CSS中引用它。

希望看看这个链接，它会有所帮助。

https://www.w3schools.com/tags/tag_img.asp

Answer 4

使用CSS可能比您想象的更简单。请尝试在HTML网页的TextBlock和<head>标记中添加此内容：

</head>

然后将其放在您希望图像显示的位置：

<style>
  .banner {background-image: url("http://placehold.it/1920x1050")}
</style>

根据需要设置样式，添加文字等。

如果您想在自己的计算机上托管该文件，只需替换＆＃34; http://placehold.it/1920x1050＆＃34;喜欢＆＃34; assets / pics / my_image.jpg＆＃34;。

祝你好运！

如何在html上制作背景图片

4 个答案: