Question

我一直想知道为什么在我的代码中分配它们时，某些背景图像不会为我加载。我可能写错了什么，但我觉得我已经尝试过各种方法将背景图像实现到我的视线中，并且我试图引用的网站没有任何效果。我正在尝试使用来自unsplash.com的图片这是我目前的CSS尝试获取背景图片：

html {
background-image: url(https://unsplash.com/search/peacock?photo=lssS7acGDls);
background-repeat: no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Answer 1

您申请的url无效。它没有图像。您正在申请的网址是一个HTML页面。右键单击它并单击查看背景图像以转到图像。

html{
  background-image: url('https://images.unsplash.com/photo-1454551434781-2e5c58959f85?dpr=1&auto=format&fit=crop&w=1500&h=998&q=80&cs=tinysrgb&crop=');
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Answer 2

您的链接看起来不对。转到图像，右键单击，然后选择复制图像链接。并使用引号＆＃34; ＆＃34;用于background-image URL（）标识符。

background-image: url("http://www.exemple.xyz/bck.png");

Answer 3

检查网址的路径。下面的工作示例。

background-image: url(http://www.alternativenation.net/wp-content/uploads/2016/04/nirvana93.jpg);
 background-repeat: no-repeat;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;

Working JSBin

Answer 4

将此用作背景图像Url

https://images.unsplash.com/photo-1454551434781-2e5c58959f85?dpr=1&auto=format&fit=crop&w=1500&h=998&q=80&cs=tinysrgb&crop=

为什么有些背景图片在HTML中对我不起作用？

4 个答案: