为什么我的背景图片没有出现?
我正在尝试放置一个重复的渐变 .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 属性甚至没有显示,所以我输入错误了吗?
现在,根据各种问题:
我的 HTML 和 CSS 文件位于同一目录中(您会注意到该图像在 div 中使用 - 我这样做是为了确定该文件是否可访问 - 确实如此)。
我现在已经在 IE/Chrome/Firefox/Opera 中测试了这个页面。图像本身显示为单独的图像,除了在 Firefox 中。
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:
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).
I have tested this page in IE/Chrome/Firefox/Opera now. The image itself shows up as an individual image, except in Firefox.
http://nepaninjas.com
This code is live with the error at this time.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
您声明错误
应该是
如果您使用
background-image
您唯一可能的值是image-url
而不是其他任何值。You declared it wrong
Should be
If you use
background-image
your only possible value isimage-url
not anything else.背景图像明确允许您设置背景图像,仅此而已。利用背景属性,您可以在一行中将多个设置应用于背景。
以下是您可以在后台属性中指定的内容的规范:
另外,请记住 url 中的路径是相对于 CSS 文件本身的位置的。如果可以的话,我建议使用 http 根目录作为文件路径。这使得您的 CSS 更加灵活,如果您要重组或移动 CSS 文件,图像路径随后将不需要更新。因此,如果您可以管理,我建议:
只要您的图像位于 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.
Here's the spec for what you can specify in the background property:
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:
Provided your images are located in http://domain.com/images/
更改背景图片的 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
)