如何使 CSS URL 背景图像显示在 localhost 中?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/2853308/
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 22:05:40  来源:igfitidea点击:

How to make CSS URL background images show up in localhost?

csslocalhostxamppbackground-image

提问by Joel

I just installed xampp and I brought one of my live sites into it to be able to start working from localhost.

我刚刚安装了 xampp,并将我的一个实时站点带入其中,以便能够从本地主机开始工作。

So to view my site, I navigate to localhost/example.com

所以为了查看我的网站,我导航到 localhost/example.com

I noticed some issues with images when on my html, I had for example:

我在我的 html 上注意到图像的一些问题,例如:

<img src="/new_pictures/05.jpg" alt="Central Market"/>

Image wouldn't show up, but then I removed the /and this works:

图像不会出现,但后来我删除了/,这有效:

<img src="new_pictures/05.jpg" alt="Central Market"/>

I seem to have a similar problem with the CSS background image, but I can't get it to work-if I remove the / there, the image doesn't show up on the live site. How do I make the background image show up on localhost?

我似乎对 CSS 背景图像有类似的问题,但我无法让它工作 - 如果我删除那里的 /,图像不会显示在实时站点上。如何使背景图像显示在本地主机上?

Example CSS (works in live site but not localhost):

示例 CSS(适用于实时站点但不适用于本地主机):

.outeremailcontainer {
height:60px;
width: 275px;
background-image:url(/images/feather_email2.jpg);
text-align:center;
float:right;
position:relative;
z-index:1;
}

Thanks!

谢谢!

回答by Nick Craver

The image paths in your stylesheet should be where the image is relative to the stylesheet, for example if your .cssfile is in a directory like this on your site:

样式表中的图像路径应该是图像相对于样式表的位置,例如,如果您的.css文件位于您网站上这样的目录中:

/css/styles.css

Your path should look like this (go up a directory, then into images)

你的路径应该是这样的(进入一个目录,然后进入images

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

回答by Joel

You can try the basetag - supported in most popular browsers - and then supply paths relative to the hrefattribute of the basetag. Or make sure you supply correct paths relative to the CSS stylesheet

您可以尝试使用base大多数流行浏览器都支持的标签,然后提供hrefbase标签属性相关的路径。或者确保您提供相对于 CSS 样式表的正确路径

回答by Sarfraz

Try using ./instead of /and make sure that you are specifying the correct path.

尝试使用./而不是/并确保您指定了正确的路径。