我尝试使用 jquery 将第一个产品图片设置为 shopify 产品页面中的背景图片,但我遇到了问题,当我输入此代码时:
$('body').css('background', '#FFFFFF')
(这只是一个例子)
背景只出现在页面中间,我尝试使用 $('body').parent().css('background', '#FFFFFF')
但是背景出现了在页面的标题中,我在一些网站上进行了搜索,解决方案是我编写的代码,但我不知道为什么这在我的网站上不起作用。
我网站的网址是http://pruebakms4.myshopify.com/collections/frontpage/products/porducto-2
所以,如果有人能帮助我,我将不胜感激。 非常感谢。
最佳答案
您的原始背景图片正在应用于“body”和“html”,因此当您使用 javascript 时,它会更改 body 背景,但 html 背景仍然存在。
由于您的 css,body 元素比您的 html 元素小,并且由于 id 为 contenedorMenu 的元素中的边距,boty 元素向下移动了几个像素。
html 高度应为 100%,body 不应指定高度,但最小高度应为 100%(问题是在您的 css 中某处您将 body 高度设置为 100%)。 See here for reference
在#contenedorMenu 中不使用 margin-top:2%,而是使用 padding-top:2%。您的 CSS 应如下所示:
html{
height: 100%;
}
body{
min-height:100%;
}
#contenedorMenu {
padding-top: 2%;
text-align: center;
position: relative;
z-index: 1;
}
在此之后,您的 javascript 调用将正常工作:
$('body').css('background', '#FFFFFF');
但是,请记住,您还将原始背景图像分配给了 html 元素,因此您可能想要执行以下操作:
$('body, html').css('background', '#FFFFFF');
将新背景应用于 body 和 html 元素。 或者您可能想要清理您的 css,以便永远不会将背景设置为您的 html 元素。
关于jquery - 购物背景图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34488544/