Question

我使用检查器为该图标提取了相关信息：

然后我将其放在文件中以进行本地查看，就像本地小提琴一样：

我还确保可以访问该图像。看到这里：

http://ssl.gstatic.com/gb/images/i1_1967ca6a.png

但我仍然看不到任何图标。

更新：

尽管可以访问文件，如上所示，但是我正在控制台中找到它；

获取文件：//ssl.gstatic.com/gb/images/i1_1967ca6a.png 净:: ERR_FILE_NOT_FOUND

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>


<style>
  /* add CSS here */

  .gb_x {
    color: #000;
    cursor: pointer;
    text-decoration: none;
    background-position: -132px -38px;
    opacity: .55;
    background-image: url(//ssl.gstatic.com/gb/images/i1_1967ca6a.png);
    -webkit-background-size: 528px 68px;
    background-size: 528px 68px;
    display: inline-block;
    outline: none;
    vertical-align: middle;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 30px;
    width: 30px;
    color: #000;
    cursor: pointer;
    text-decoration: none;
  }
</style>

<body>

  <a class="gb_x gb_ac" href="https://www.google.com/intl/en/about/products?tab=wh" title="Google apps" aria-expanded="false" role="button" tabindex="0">
  </a>

</body>

</html>

Answer 1

前面带有//的URL意味着它将使用与请求文件相同的协议（隐式协议）来请求文件。（mdn: Absolute URLs vs relative URLsSection ）

您的错误消息：

获取file：//ssl.gstatic.com/gb/images/i1_1967ca6a.png网址：: ERR_FILE_NOT_FOUND

表示正在本地打开请求文件（file:）。

因此，您需要更改URL，显式添加协议（https://ssl.gstatic.com/或http://ssl.gstatic.com/），或者需要使用本地Web服务器，以便使用以下命令打开请求文件： http或https协议。

Answer 2

CSS中PNG的给定链接是错误的。它会在您的文件系统中寻找它，而不是去那个Google网站。这应该解决它-

background-image: url(https://ssl.gstatic.com/gb/images/i1_1967ca6a.png);

Answer 3

更新以下行。这项工作对我来说。

 background-image: url(http://ssl.gstatic.com/gb/images/i1_1967ca6a.png);

Answer 4

我在您的代码中找不到任何问题。检查下面的链接

.gb_x {
color: #000;
cursor: pointer;
text-decoration: none;
background-position: -132px -38px;
opacity: .55;
background-image: url(//ssl.gstatic.com/gb/images/i1_1967ca6a.png);
-webkit-background-size: 528px 68px;
background-size: 528px 68px;
display: inline-block;
outline: none;
vertical-align: middle;
-webkit-border-radius: 2px;
border-radius: 2px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
height: 30px;
width: 30px;
color: #000;
cursor: pointer;
text-decoration: none;

}

See the fiddle

为什么我在这里看不到Google的应用程序图标？

4 个答案: