3

大家好，我有一个快速的问题。我正在使用 Visual Studio 2012 学习 HTML 和 CSS。我正在尝试拥有多个背景来尝试视差效果类型的东西。我知道 CSS 可以有多个背景，如下所示：

    background: url("/file/image.png"), url("/file/images2,png"), etc.....

但我想做的是使用 div id 选择器调用图像，如下所示

    #image1 { background:url ("/file/image.png");}


    #image2 { background: url ("/file/image2.png");}

HTML

    <body>

    <div id="image1"></div>
    <div id="image2"></div>

每次我运行以下代码时，屏幕上都没有显示任何内容。我唯一得到的东西是如果我把代码放在 body{} 上。我错过了什么还是 VS 2012 设置不正确？

谢谢

4

5 回答 5

1

在您的 css 样式中定义图像的高度和宽度

#image1 { background:url ("/file/image.png"); height: xxxpx; width: xxxpx;}
#image2 { background: url ("/file/image2.png"); height: xxxpx; width: xxxpx;}
于 2012-11-12T00:06:54.250 回答
0

感谢大家的快速回复。关于宽度和高度的所有答案都适用于我的代码，并且图像能够正常显示。

谢谢。

于 2012-11-12T15:35:08.840 回答
0

默认情况下，div标签是其中内容的高度。如果您没有内容，div那么它将是零高度。您可能需要手动将图像的高度添加到 div 标签：

div#image1 { height: 200px; /* Height of image.png */ }
div#image2 { height: 300px; /* Height of image2.png */ }
于 2012-11-11T23:48:40.513 回答
0

它不是 Visual Studio。如果您使用的背景图像中没有包含任何内容，那么您的 div 元素就没有内容可以调整大小。

您要么需要在 div 元素上设置固定尺寸，要么在其中放置足够的内容以使其大小合适。

于 2012-11-11T23:49:15.087 回答
0

实际上，您只需要仔细检查图像的位置。

在行中：

#image1 { background:url ("/file/image.png");}

在 CSS 中，url 是相对于这个样式表的位置的。在 Visual Studio 2012 中，如果您的 .css 文件位于一个文件夹中，而您的图像位于同一级别的另一个“文件”文件夹中，您可以将其编写为：

#image1 { background:url ("../file/image.png");}
于 2012-11-12T00:03:01.043 回答