0

当我将此代码放在我的 html 文件中时，它可以正常工作：

  <style type="text/css" media="screen">
    #headerimg 
    {
      display: block;
      background-image: url('/Content/images/epp/ebweblogo1.gif');
      background-repeat: no-repeat;
      background-position: center center;
            width:100%;
      height:100%;   
        margin: 0;
  padding: 0;
    }
  </style>

但是当我将它移动到我的css文件时：

#headerimg 
    {
      display: block;
      background-image: url('/Content/images/epp/ebweblogo1.gif');
      background-repeat: no-repeat;
      background-position: center center;
            width:100%;
      height:100%;   
        margin: 0;
  padding: 0;
    }

这是我的html：

</head>
  <body>

    <div class="page">

      <div id="header">
      <div id="headerimg" />

我假设这是由于图像位置造成的，但我不确定，因为我尝试了路径的变体并且从未让它工作。

有什么建议么？

编辑

对不起，你无法读懂我的心，我知道。

当我将 css 放在 html 文件中时，图像显示正常。当我将它移动到 css 文件 (site.css) 时，它根本不显示。我尝试了几种不同的路径，无论我放什么都不会显示。

更新#2

当我将我的 html 更改为：

<div class="page">

  <div id="header">
    <div id="headerimg">test</div>

我将文本后面的图像作为 1 行表示测试但不是图像的完整大小。

因此，由于 div 的大小，它显然没有显示图像？我将css更改为：

高度：130px；

但这根本没有改变高度。

4

3 回答 3

5

CSS 的两个位不等价。

一方面，您有（id 选择器），它是与（类选择器）#headerimg非常不同的选择器。.headerimg

#imgplacement第二个样本中也缺少。

至于图像问题 - 您需要确保图像目录的正确路径。

这将与 CSS 所在的位置相关 - 如果在CSS文件中，图像需要与 CSS 文件相关。如果它嵌入在 HTML 中，它需要相对于 HTML 文件。

由于路径是有根的（以 开头/），它应该可以在任何地方工作。使用开发者工具来确定它在哪里寻找图像。

于 2012-12-26T09:50:34.283 回答
0

在主页上包含这样的 CSS：

<link rel="stylesheet" type="text/css" href="route_to_your_style.css" media="all" />

然后小心你的形象的路线。

于 2012-12-26T10:09:20.163 回答
0

<head></head>在您的部分之间包含 CSS 文件，HTML如下所示：

<link rel="stylesheet" type="text/css" href="http://www.yoursite.com/css/cssfile.css" />
于 2012-12-26T10:15:27.890 回答