为什么我的背景图片没有出现?

发布于 2025-01-01 18:03:04 字数 1020 浏览 1 评论 0原文

我正在尝试放置一个重复的渐变 .png 作为 div 的背景图像。

CSS:

background-image: url(./images/backbar.png) repeat-x;

我也尝试过加引号,没有任何变化。 Opera 中的蜻蜓界面是这样说的:

#final_bar { 
    color: rgb(0, 0, 0);
    display: block;
}
nepan.css:43
.bar { 
    clear: both;
    margin-left: auto;
    margin-right: auto;
    width: 771px;
}
default values
div { 
    <strike>display: block;</strike>
}
Inherited from div
nepan.css:31
.wrapper { 
    <strike>color: rgb(40, 40, 40);</strike>
    font-family: "Arial", "Helvetica", sans-serif;
    font-size: 12px;
    line-height: 18px;
    text-align: left;
}

^ style 属性甚至没有显示,所以我输入错误了吗?

现在,根据各种问题:

  1. 我的 HTML 和 CSS 文件位于同一目录中(您会注意到该图像在 div 中使用 - 我这样做是为了确定该文件是否可访问 - 确实如此)。

  2. 我现在已经在 IE/Chrome/Firefox/Opera 中测试了这个页面。图像本身显示为单独的图像,除了在 Firefox 中。

  3. http://nepaninjas.com 此代码目前已生效,但存在错误。

I am trying to place a repeating gradient .png as a background-image for a div.

CSS:

background-image: url(./images/backbar.png) repeat-x;

I also tried it with quotes, and there was no change. This is what the dragonfly interface in Opera says:

#final_bar { 
    color: rgb(0, 0, 0);
    display: block;
}
nepan.css:43
.bar { 
    clear: both;
    margin-left: auto;
    margin-right: auto;
    width: 771px;
}
default values
div { 
    <strike>display: block;</strike>
}
Inherited from div
nepan.css:31
.wrapper { 
    <strike>color: rgb(40, 40, 40);</strike>
    font-family: "Arial", "Helvetica", sans-serif;
    font-size: 12px;
    line-height: 18px;
    text-align: left;
}

^The style property isn't even showing up, so am I mistyping?

Now, as per the various questions:

  1. My HTML and CSS files are in the same directory (you will note that the image is used in the div--I did that to determine if the file was accessible - it is).

  2. I have tested this page in IE/Chrome/Firefox/Opera now. The image itself shows up as an individual image, except in Firefox.

  3. http://nepaninjas.com This code is live with the error at this time.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

凝望流年 2025-01-08 18:03:04

您声明错误

background-image: url(./images/backbar.png) repeat-x;

应该是

background: url(./images/backbar.png) repeat-x;

如果您使用 background-image 您唯一可能的值是 image-url 而不是其他任何值。

You declared it wrong

background-image: url(./images/backbar.png) repeat-x;

Should be

background: url(./images/backbar.png) repeat-x;

If you use background-image your only possible value is image-url not anything else.

不一样的天空 2025-01-08 18:03:04

背景图像明确允许您设置背景图像,仅此而已。利用背景属性,您可以在一行中将多个设置应用于背景。

background: url(./images/backbar.png) repeat-x;

以下是您可以在后台属性中指定的内容的规范:

background: { background-color background-image background-repeat background-attachment background-position | inherit } ;

另外,请记住 url 中的路径是相对于 CSS 文件本身的位置的。如果可以的话,我建议使用 http 根目录作为文件路径。这使得您的 CSS 更加灵活,如果您要重组或移动 CSS 文件,图像路径随后将不需要更新。因此,如果您可以管理,我建议:

background: url(/images/backbar.png) repeat-x;

只要您的图像位于 http://domain.com/images/

Background-image explicitly lets you set the background image and nothing else. Utilizing the background property will let you apply multiple settings to the background in one line.

background: url(./images/backbar.png) repeat-x;

Here's the spec for what you can specify in the background property:

background: { background-color background-image background-repeat background-attachment background-position | inherit } ;

Also, keep in mind that the path in the url is relative to the location of the CSS file itself. If you can I recommend utilizing the http root for your file paths. This allows your CSS to be more flexible if you were to restructure or move your CSS file the image paths will not subsequently need to be updated. So if you can manage I would recommend:

background: url(/images/backbar.png) repeat-x;

Provided your images are located in http://domain.com/images/

折戟 2025-01-08 18:03:04

更改背景图片的 URL。如果它位于外部目录中,请使用两个点而不是一个(../images 而不是 ./images

Change your background image's URL. If it's in an outside directory, use two dots instead of one (../images instead of ./images)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文