背景图像位置错误

时间:2016-02-27 19:23:53

标签: css background-image background-position

我有一个文字标题,背景图片使用此css圈出文字:

.page-id-44491 #page-header-bg h1 {
font-size:69px !important;
text-transform:uppercase;
background: url(http://rocketcafe.co.uk/wp-content/uploads/2015/12/scribble.png) no-repeat;
background-size: 500px 200px;
background-position: 50% calc(50% - 5px);
}

这在大多数浏览器中都能完美运行,而且我认为,大多数设备 - 但我昨天在三星平板电脑上看到了该网站,背景图像根本没有位置。

你可以在这里看到两个比较(第二个是由客户发送的,质量不高)

该网站为http://www.rocketcafe.co.uk/

示例是:

https://www.dropbox.com/s/mxmmtmtz0pfshhu/Screen%20Shot%202016-02-27%20at%207.15.55%20PM.png?dl=0

https://www.dropbox.com/s/i4snyu96nsxkeo9/12782387_10153893672215729_994231173_n.jpg?dl=0

有谁知道这是为什么?背景图像属性或calc函数没有供应商前缀,所以我不知道为什么这不起作用?

非常感谢任何帮助。

由于

1 个答案:

答案 0 :(得分:1)

很遗憾,我无法为您提供完整的答案。但我可以帮忙。

这是截图上的Android浏览器。开发者的纯粹邪恶。函数calc(可能是较少的函数。我在较少的时候使用它)不能在那里工作。

请看这里。也许this answer会帮助您或某人提供适合您的替代方案。