我有以下 CSS:
.flag
{
background-image: url('http://192.168.1.88/david/images/flag_set/flag_set/europa_flag_set.jpg');
width: calc(4 * 5.93px);
height: calc(4 * 3.99px);
background-size: calc(4 * 35.08px) calc(4 * 49.63px);
cursor:pointer;
}
.flag.portugal
{
float: left;
background-position: calc(4 * -14.62px) calc(4 * -30.42px);
}
.flag.reinoUnido
{
float: right;
background-position: calc(4 * -21.40px) calc(4 * -40.22px);
}
以及对应的html:
<div class="flag contentor">
<div class="flag portugal" onclick="$('.lang').removeClass('mostra');$('.lang.portugal').addClass('mostra');"></div>
<div class="flag reinoUnido" onclick="$('.lang').removeClass('mostra');$('.lang.reinoUnido').addClass('mostra');"></div>
</div>
在我的笔记本电脑上它工作正常,但在我的安卓平板电脑上它只显示两个白色方 block 。
我在定位背景时做错了什么吗?是否与平板电脑的浏览器不兼容?
我使用的图像是:
我需要在 div 中显示的是葡萄牙国旗和英国国旗,如下所示:
我可以使用任何 polyfill/shim 来纠正这个问题吗?
最佳答案
calc()
用于计算不同的度量,例如100% - 24px
、15em * 14%
等。你有确切的措施,所以你不需要计算。也许这就是问题所在。我假设你的背景图片句子在你的代码中没有问题。但是,我不知道你为什么要在像素大小上设置 2 位小数,这对我来说似乎毫无意义。
.flag
{
background-image: url('http://192.168.1.88/david/images/flag_set');
width: 23.72px;
height: 15.96px;
background-size: 140.32px 198.52px;
cursor:pointer;
}
.flag.portugal
{
float: left;
background-position: -58.48px -121.68px;
}
.flag.reinoUnido
{
float: right;
background-position: -85.6px -160.88px;
}
关于css - android 中的背景位置不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39744816/