Question

#bgImage{
background-image:url("/MedicineAlert/res/drawable-hdpi/bgimage.png");
background-size: 100% 100%;
background-repeat:no-repeat;
background-position:100% 100%;
top: 0px;
left: 0px;
}

.formButton{

    font-family: Verdana, Geneva, sans-serif;
    font-size: 24px;
    color: #FFF;
    padding: 5px 10px 5px 10px;
    border: solid 1px #CCC;

    background: #ba4742;
    text-shadow: 0px 1px 0px #000;

    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;

    box-shadow: 0 1px 3px #111;
    -moz-box-shadow: 3px 3px 1px #999;
    -webkit-box-shadow: 3px 3px 1px #999;

    cursor: pointer;

}
.formButton:hover {
    background: #a33f3a;
}

    <!DOCTYPE HTML>
<html>
  <head>
    <meta name="viewport" content="width=320; user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Alert Time</title>
      <link rel="stylesheet" href="register.css" type="text/css" media="screen" title="no title">
      <script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
      <script type="text/javascript" charset="utf-8" src="register.js"></script>
  </head>
  <body id="bgImage">
    <hearder>
        <h1>Please fill out the form and submit</h1>
    </header>
    <div>
        <form action="" method="post">
             <header>
                <h1>
                    Your information Please!
                </h1>
             </header>
             <div>

        <form id="form_info" action="" method="post">       
                 Fist Name &nbsp;&nbsp;<input type="text" name="fname" required="required" /><br />
                 Middle Name &nbsp;&nbsp;<input type="text" name="mname" /><br />
                 Last name &nbsp;&nbsp;<input type="text" name="lname" required="required" /><br />
                 Date of birth &nbsp;&nbsp;<input type="text" name="dOfBirth" required="required"/><br />
                 Social security Number &nbsp;&nbsp;<input type="text" name="sNumber" /><br /> 
                 Gender &nbsp;&nbsp;<label for="male">Male</label>
                 <input type="radio" name="sex" id="male" />
                 <label for="female">Female</label>
                 <input type="radio" name="sex" id="female" />
                </div><br />
                <input type="submit" name="submitButton" value="Submit" class="formButton" />
        </form>
    </div>  
  </body>
 </html>

我在drawable-hdpi文件夹中访问Image时遇到了困难。首先，我在assets文件夹中创建了一个名为image的文件夹，然后我尝试使用css引用资源目录中的image文件夹中的图像，但是它不起作用。我决定使用drawable来获取我的资源，但我仍然遇到同样的问题。有帮助吗？

Answer 1

将图像放回assets / www文件夹中，可能位于名为images的文件夹中，并按如下方式访问：

背景图像：URL（ “图像/ bgimage.png”）;

这应该有用。

你的内联css是否应该在html doc的head元素内并由

包装

        <style></style>

Answer 2

部署应用程序时内部使用的路径与您在项目结构中看到的路径不同。尝试

background-image:url("file:///android_res/drawable/bgimage.png");

对于资产/图片，请使用

background-image:url("file:///android_asset/image/bgimage.png");

在phonegap中设置背景图像

2 个答案: