Question

我是CSS新手，正在慢慢学习它。我浏览了这些论坛，寻找我的问题的答案，但我没有尝试过。这是代码。

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="css.css">
  </head>
<body>
  <br>
  <div>
    <a href="http://www.google.com" class="boxa"> </a>
  </div>
</body>
</html>

这是CSS：

.boxa {
  display: block;
  background:url(C:\Users\Sidworld\Desktop\App-Google-icon.png);
  width: 512px;
  height: 512px;
  -webkit-transition:width 0.1s, height 0.1s, background-color 0.4s, -webkit-transform 0.5s;
  transition:width 0.1s, height 0.1s, background-color 0.4s, transform 0.1s;
}

.boxa:hover {
  background:url(..\Desktop\App-Google-icon.png);
  width:1024px;
  height:1024px;
}

我是新来的，所以请忍受错误的格式化。图像在我的桌面上，我已经检查过了。

Answer 1

更改

background: url(C:\Users\Sidworld\Desktop\App-Google-icon.png);

到

background-image: url("/Users/Sidworld/Desktop/App-Google-icon.png");

永远不要使用\。反斜杠是转义字符，因此单个\通常并不代表您认为的含义。

多年来，Windows已经了解/。即使您在本地工作，也可以安全地使用/代替\并且更便于携带。

此外，C:是另一个Windows专用的东西。如果可以，请尝试使用相对路径，即./icon.png或../Images/icon.png以保留可移植性。

最后，此处首选使用background-image，因为这是您设置的唯一属性。如果您在其他地方定义background，则可以覆盖您设置的图像！

Answer 2

和图片意外地不同的方式？为什么这样？通常，图像位于各自的文件夹目录项目

中

Answer 3

假设您的图片位于html文件和css所在的位置，请将您的css更改为以下内容：

.boxa {
  display: block;
  background:url(App-Google-icon.png);
  width: 512px;
  height: 512px;
  -webkit-transition:width 0.1s, height 0.1s, background-color 0.4s, -webkit-transform 0.5s;
  transition:width 0.1s, height 0.1s, background-color 0.4s, transform 0.1s;
}

.boxa:hover {
  background:url(App-Google-icon.png);
  width:1024px;
  height:1024px;
}

为什么我的图像没有显示在CSS中？

3 个答案: