Question

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

我有一个空白页面，其背景在外部sylesheet中定义。

除此之外，我在主体中包含了一个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
}

- 是的，我绝对相信链接是正确的：）

提前致谢，马格努斯

Answer 1

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

Answer 2

如果您的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
}

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

Answer 3

你缺少（;），你需要给你的div宽度和高度：

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

Answer 4

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

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

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

background: url(images/NYCNEW.jpg);

...将被翻译为......

style/images/NYCNEW.jpg

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

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

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

您还需要向bit_1 div提供一些内容，或者向控件提供height和width，否则将永远不会看到它。（只是给div一个背景图像不会显示div，因为它只是背景。）

Answer 5

嗨，现在为什么你定义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;
}

现在检查您的图片路径并应用

Answer 6

你并没有真正说出你的问题是什么，但我想在.bit_1 div中没有显示背景图片？如果是这种情况，那么您需要在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;
}

CSS div背景没有出现

6 个答案: