Question

我想通过CSS将GIF图片添加到我的网页，图片大小应为100px X 100px。

文件结构如下：

Folder:
   /index.html
   /car.gif

我添加了JSFiddle代码。有人可以改正吗？ GIF未显示在index.html：

上

代码

<html>
  <head>
<style type="text/css">
      #position {
     background-image: url('car.gif'); 
        width: 25px;
        height: 25px;
        position: absolute;

      }
    </style>
  </head>
  <body>
    dd
    <div id="position"></div>

ss
  </body>
</html>

Answer 1

如果未指定绝对路径，则image（car.gif）必须与CSS位于同一目录中。出于这个原因，JS小提琴是没用的。检查以确保您的文件位于您建议的位置。

您也可以从更明确的背景声明中受益，例如：

background: url('car.gif') top left no-repeat transparent;

此外，如果您的图片的原始尺寸为100px×100px，则需要调整其大小以便正确查看：

background-size: 25px 25px;

我更新了另一个小提琴，为您的问题添加了更相关的版本： http://jsfiddle.net/qtxg2jz5/6/

要回答Astro的评论，我无法对帖子发表评论，因为我还没有足够的声誉。

Answer 2

确保文件car.gif存在于同一目录中或使用图像的绝对网址

DEMO

Answer 3

我已经在浏览器中测试了您的代码，方法是从我的桌面替换图像并显示图像。只需改变其宽度和高度：

width: 25px;
height: 25px;

到

 width: 100px;
 height: 100px;

一旦检查一下......

例如：如果我们的网页网址是：

  www.yoursite.com/css/index.php

如果将index.php替换为car.gif，

，请确保可以访问car.gif

  www.yoursite.com/css/cars.gif

是否可访问。

但这意味着该文件应该在同一个文件夹中。

尝试一下，希望你能得到你需要的结果..

通过CSS添加时不显示GIF图像

3 个答案: