硬盘上的css图像 [英] css image from hard disk

问题描述

我打算建立一个GUI，我正试图通过CSS将图像加载为背景图像. 我的HTML表格几乎是空的，除了标题和div容器(我在其中加载了使用JAVA和Google Web Toolkit构建的GUI)之外.

从Internet加载背景图像效果很好！

.Bild {
    background: url("http://developer.aldebaran-robotics.com/media/img/home/nao_h25.png")
    no-repeat
    center;
}

但是现在我想从我的硬盘上加载它，最好是从项目中的文件夹中加载它. 结构如下:

工作区→项目→战争→CSS文件

工作区 →项目 →图片 →image.png

我通过使用相对路径进行了尝试.我不确定我是否做对了.它不起作用:

.Bild {
    background: url(/images/image.png)
    no-repeat
    center;
}

我确定您可以帮助我！

非常感谢

解决方案

您需要提供图片文件相对于CSS文件的路径 让我们以您的目录结构示例为例:

workspace/
 project/
   war/
      cssfile.css
   images/
      image.png 

您相对于css文件的图像路径必须为

../images/image.png

.Bild {
    background: url(../images/image.png)
    no-repeat
    center;
}

此处:..表示当前目录上方的一个目录.您可以使用../../进入两个目录.

要找出相对路径，您需要导航到公共父目录，然后向下浏览到媒体文件的位置.在这种情况下，公共父目录是上一级，因此../就足够了，然后向下浏览目录结构images/image.png.

im about to build a GUI and I am trying to load an image as background image via css. My HTML sheet is nearly empty except the headline and a div container in which I load the GUI, built with JAVA and the Google Web Toolkit.

Loading the background image from the internet works out pretty well!

.Bild {
    background: url("http://developer.aldebaran-robotics.com/media/img/home/nao_h25.png")
    no-repeat
    center;
}

BUT now i want to load it from my hard disk, better to say from a folder in the project. The structure looks like this:

workspace → project → war → css file

workspace → project → images → image.png

I tried it by using a relative path. I am not sure if I did it correctly. It doesnt work:

.Bild {
    background: url(/images/image.png)
    no-repeat
    center;
}

Im sure you can help me!

Thanks a lot

解决方案

You need to provide the path of the image file relative to the css file Lets take your directory structure example:

workspace/
 project/
   war/
      cssfile.css
   images/
      image.png 

Your image path relative to the css file would have to be

../images/image.png

.Bild {
    background: url(../images/image.png)
    no-repeat
    center;
}

Here: .. means one directory above the current directory. You can use ../../ to go two directories up.

To figure out the relative path, you need to navigate up to the common parent directory and then walk down to the location of the media file. In this case, the common parent directory is one level up, hence ../ is enough and then walk down the directory structure images/image.png.

这篇关于硬盘上的css图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！