如何更改 PhoneGap 应用程序中的背景图像？
我试图在方向改变时改变身体背景图像。起初这看起来很简单，所以我尝试了这段代码：
function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
document.addEventListener("orientationchange", onOrientationChange, true);
}
function onOrientationChange(e) {
var orientation = (window.orientation == -90 || window.orientation == 90) ? "landscape" : "portrait";
console.log("orientation: " + orientation);
$("body").css("background-image", "url(images/" + orientation + ".png) no-repeat fixed center top");
}
function onDeviceReady() {
console.log("at onDeviceReady");
onOrientationChange();
}
每次更改方向时，我都会在控制台中显示正确的方向 - 这意味着我的事件被正确触发。但背景不会改变，甚至最初设置（即使我在 onDeviceReady 中手动调用处理程序 - 并且我看到它被调用的控制台输出）。 $("body") 行中的某些内容不起作用。我尝试了几种 CSS 属性的组合，甚至尝试了 .css({"backgroundImage" : "..."})，但没有成功。
根据记录，图像文件夹中有一个 Landscape.png 和 Portrait.png，与 html 页面位于同一目录中。
我缺少什么？
感谢您抽出时间。
I'm trying to change the body background image whenever orientation changes. This seemed pretty easy at first, so I tried this code:
function onBodyLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
document.addEventListener("orientationchange", onOrientationChange, true);
}
function onOrientationChange(e) {
var orientation = (window.orientation == -90 || window.orientation == 90) ? "landscape" : "portrait";
console.log("orientation: " + orientation);
$("body").css("background-image", "url(images/" + orientation + ".png) no-repeat fixed center top");
}
function onDeviceReady() {
console.log("at onDeviceReady");
onOrientationChange();
}
Every time I change the orientation, I get the correct orientation displayed in the console - meaning my event gets trigrerred properly. But the background does not change, or even initially set (even though I call the handler manually in onDeviceReady - and I see the console output that it was called). Something in the $("body") line just doesn't work. I tried several combinations of CSS properties and even .css({"backgroundImage" : "..."}), but to no avail.
For the record, there's a landscape.png and portrait.png in an images folder, in the same directory as the html page.
What am I missing?
Thanks for your time.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
也许没有 jQuery？
正如 @scessor 所说，你只能设置
background-image属性的url，所以你应该使用background或其他backgroundXXX属性。使用类
Maybe without jQuery?
As @scessor said you can only set the
urlof thebackground-imageproperty, so you should usebackgroundor the otherbackgroundXXXproperties instead.Using classes
background-image仅定义一个 url（请参阅定义 ):或使用带有 url 和更多背景参数的
background（请参阅定义< /a>):===更新 ===
尝试以下操作：
或
background-imageonly defines an url (see definition):or use
backgroundwith an url and more background parameters (see definition):=== UPDATE ===
Try following:
or
找到两篇可能对你有用的文章。
mobile-safari-background-image -scaling-quirk
另一个与重复的CSS有关。
Background-image-doesn-t-show-up-in-Safari
乍一看，您可能没有这样做；但也许改变你的背景图像会导致同样的问题。
Found two articles that may be of use to you.
mobile-safari-background-image-scaling-quirk
and the other has to do with duplicate css.
Background-image-doesn-t-show-up-in-Safari
at first it may not seem like you are doing this; but maybe changing your bgimage is causing the same problem.