1

我是 Web 开发的新手，但我几天来一直在寻找解决这个问题的方法，所以我决定最后问你。

我有一个空页面，其背景在外部样式表中定义。

除此之外，我在正文中包含了一个 div，我将使用它通过外部样式表定位图像，而不仅仅是在 html 文件中插入一个标签。

这是我的html文件：

<! DOCTYPE html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<head>
    <title>Azin Productions</title>

    <link rel="stylesheet" type="text/css" href="style/style_2.css">
    <link rel="stylesheet" type="text/css" href="style/MyFontsWebfontsOrderM3219563.css">
</head>

<body>
    <p>Hello World</p>
    <div class="bit_1"></div>
</body>

这是我的样式表：

    body {
  background: url(images/NYCNEW.jpg);
  background-size:100% 130%;
  background-repeat:no-repeat;
  z-index: -100;

  font-family: Museo-500; calibri;
}

p {
  color:orange;
}

.bit_1 {
  color:blue;
  background-image: url(images/bits/bit_1.png)
  z-index: 500
}

-是的，我绝对确定链接是正确的:)

在此先感谢，马格努斯

4

6 回答 6

1

为 指定宽度和高度<div class="bit_1"></div>。

于 2012-09-11T08:21:51.690 回答
0

如果您的 css 文件位于文件夹中，则需要在图像路径之前添加 ../。../ 代表根文件夹。

像这样更改代码

body {
  background: url(../images/NYCNEW.jpg);
  background-size:100% 130%;
  background-repeat:no-repeat;
  z-index: -100;

  font-family: Museo-500; calibri;
}

.bit_1 {
  color:blue;
  background-image: url(../images/bits/bit_1.png);
  z-index: 500
}

您需要在图像路径之前添加 ../。../ 代表根文件夹。

于 2012-09-11T08:21:11.130 回答
0

你缺少 (;) 并且你需要给你的 div 宽度和高度：

.bit_1 
{   
color:blue;   
background-image: url(images/bits/bit_1.png); 
z-index: 500;   width:500px;   height:50px; 
}
于 2012-09-11T08:22:16.277 回答
0

了解url(...)CSS 中图像的相对路径是如何工作的很重要，并且完全取决于 CSS 的使用位置。

如果将 CSS 放在页面中，则相对路径url(...)将与页面相同。如果将 CSS 放在链接的 .css 文件中，则 .css 文件的相对路径将与.css 文件url(...)相同

由于您的 .css 文件位于style目录中，因此以下命令...

background: url(images/NYCNEW.jpg);

...将被翻译为...

style/images/NYCNEW.jpg

为了解决这个问题，请使用 CSS 文件中的相对路径...

background: url(../images/NYCNEW.jpg);

这种行为的原因是您可以从多个页面链接到 .css 文件，如果需要，每个页面都位于不同的目录结构中

您还需要向bit_1div 提供一些内容，或者向控件提供一个height和width，否则将永远无法看到。（仅仅为 div 提供背景图像不会使该 div 出现，因为它只是背景。）

于 2012-09-11T08:27:29.963 回答
0

嗨，现在为什么你现在只定义这项z-index 工作position

像这样更改您的代码

   body {
  background: url("../images/NYCNEW.jpg");
  background-size:100% 130%;
  background-repeat:no-repeat;

  font-family: Museo-500; calibri;
}

p {
  color:orange;
}

.bit_1 {
  color:blue;
  background: url("../images/bits/bit_1.png") no-repeat 0 0;
}

现在检查您的图像路径，然后应用

于 2012-09-11T08:28:18.837 回答
0

你并没有真正说出你的问题是什么，但我猜背景图片没有显示在.bit_1div 中？如果是这种情况，那么您需要在 div 上设置高度和宽度才能显示。Div 只会自然地扩展其中的内容。

除此之外，您的 CSS 中还有各种错误：

body {
  background: url(images/NYCNEW.jpg);
  background-size:100% 130%;
  background-repeat:no-repeat;

  z-index: -100; - This will not do anything without the 'position' property set. Besides which I would never recommend using negative z-index.

  font-family: Museo-500; calibri; - The 'calibri' will be discarded here because you already ended your declaration at the first semi-colon after 'Museo-500'
}

p {
  color:orange;
}

.bit_1 {
  color:blue;
  background-image: url(images/bits/bit_1.png) - You are missing the semi-colon to end this declaration.
  z-index: 500 - Again no need for this.
}

更好的 CSS：

body {
  background: url(../images/NYCNEW.jpg) no-repeat;
  background-size: 100% 130%;    
  font-family: Museo-500, calibri;
}
p {
  color: orange;
}
.bit_1 {
  width: 500px; /* Width of your background images */
  height: 400px; /* Height of your background images */
  color: blue;
  background: url("../images/bits/bit_1.png") no-repeat;
}
于 2012-09-11T08:57:16.430 回答