如何在html上制作背景图片

时间:2017-07-12 15:43:28

标签: html css

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

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

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

4 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

要链接到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的大小。

答案 2 :(得分:0)

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

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

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

答案 3 :(得分:0)

使用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;。

祝你好运!