Question

在我的CSS中，我有一个像这样的背景图像：

    background-image:url("../images/klasExFoto.png") !important;

在模拟器和webbrowser中显示图像。当我在Android设备上运行它时，它找不到该文件夹中的图像。当我用HTML设置图像时，它可以正常工作。

    <img src="images/klasExFoto.png" />

像这样，它适用于浏览器和Android设备。

如果我将背景图片设置为“../”，则它在Android和Web浏览器上都不再有效。

如何在Android上为CSS背景图像设置文件夹路径？

我使用Worklight 6.0.0.1。

我的CSS：

    #AddClassForm_Foto{
        width:140px;
        height:140px;
        background-image:url("../images/klasExFoto.png") !important;
        border:doubles 1px #dedede;
    }
    .formItem{
        margin-top:16px;
    }

我的HTML：

    <div class="formItem">
    <label for="AddClassForm_Foto">Foto</label>
    <div id="AddClassForm_Foto"></div>
    </div>

我只在网络浏览器上看到一个图片，在Android中它没有显示。

Answer 1

您没有提及任何版本。

我在WL 6.0.0.1项目中有以下内容：

img {

background-image:url("../images/icon.png")
}

在Android 4.1.2和4.3上运行android环境。出现背景图片。

要么是您正在使用的Worklight和Android版本特有的，要么是相对路径以外的其他问题。

Answer 2

我同意这可能不是WL特定的问题。我建议你通过传递CSS linter（例如http://csslint.net/）来验证最终CSS文件的语法错误。

作为另一项测试，将该规则移到CSS文件的最顶层，看看它是否有所作为。不同的渲染器可能更容忍语法错误。

当连接CSS文件时，查看android / native / assets / www / default / css / MyCss.css文件中的最终CSS是否存在任何明显的问题。

Answer 3

看起来我的图片有一个大写字母K而webbrowser并不介意，但Android确实如此。

我更换了＆＃34; ../ images / klasExFoto.png＆＃34;与＆＃34; ../ images / KlasExFoto.png＆＃34;现在一切都恢复了。

Android上的Worklight CSS找不到images文件夹

3 个答案: