CSS:在 CSS 中设置背景图像

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/649576/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 20:25:39  来源:igfitidea点击:

CSS: Setting background-image in CSS

css

提问by jerbersoft

What is the correct syntax when setting the background-image in CSS? In visual studio, there seems to be no problem in the background since it appears. But in the browser like IE or FF, the background does not appear. is there something i missed here?

在 CSS 中设置背景图像时,正确的语法是什么?在visual studio中,从出现到后台似乎没有问题。但在IE或FF等浏览器中,背景不会出现。我在这里错过了什么吗?

syntax i am using is below (which i think is correct...)

我使用的语法如下(我认为这是正确的......)

#headerArea
{
    height: 150px;
    background-image: url('/images/bgimage.jpg');
}

the above is correct right?

以上是对的吧?

采纳答案by Draco

Depending on your folder structure and where the CSS is located relative to the images it is using you will have to go up to the root level of the image directory and access it from there so you could maybe try something like

根据您的文件夹结构以及 CSS 相对于它所使用的图像的位置,您将不得不进入图像目录的根级别并从那里访问它,以便您可以尝试类似的操作

background-image: url('/../images/bgimage.jpg');

background-image: url('/../images/bgimage.jpg');

回答by googlesearchsentmehere

i got mine working w/ ../images/bgimage.jpg

我得到了我的工作 w/../images/bgimage.jpg

how? i did NOT use quotes - ex:

如何?我没有使用引号 - 例如:

background-image: url(../images/bgimage.jpg);

回答by Tyson

If you're testing on a local machine without using a web server (i.e. if the URL of your page in FF starts with "file://", that url wont work. You'll want to specify a relative path to the image because otherwise it'll be looking for that image at the root of your hard drive.

如果您在不使用 Web 服务器的情况下在本地计算机上进行测试(即,如果您在 FF 中的页面 URL 以“ file://”开头,则该 URL 将不起作用。您将需要指定图像的相对路径,否则它会“将在您的硬盘驱动器的根目录中寻找该图像。

So if your files are like this:

所以如果你的文件是这样的:

/some/path/html/index.html
/some/path/html/images/bgimage.jpg

Your code will look like:

您的代码将如下所示:

background-image: url('images/bgimage.jpg');

回答by Tyson

That's correct syntax. Have you checked whether the image is in the right location?

这是正确的语法。您是否检查过图像是否位于正确的位置?

回答by Igor Pavelek

And remember, relative path is relative to the CSS sheet.

请记住,相对路径是相对于 CSS 表的。

回答by Philippe

If it is a relative path, remove the heading "/" in the url path?

如果是相对路径,去掉url路径中的标题“/”?

回答by CounterSpell

My CSS file is in "Themes" folder. The images are saved in "Images" folder. Both "Themes" and "Images" are sub-folders under the root directory of my project.

我的 CSS 文件位于“Themes”文件夹中。图像保存在“图像”文件夹中。“Themes”和“Images”都是我项目根目录下的子文件夹。

In this case you should use

在这种情况下,您应该使用

background-image: url(../Images/imageName.jpg);

回答by Julian Aubourg

Are you certain about the / at the beginning of the url? Aren't you trying to reach the image in the "images" subdirectory... which would imply url('images/bgimage.jpg')?

您确定 url 开头的 / 吗?您不是要访问“images”子目录中的图像吗...这意味着 url('images/bgimage.jpg')?