我正在尝试创建几个标记图像,这些图像会拉伸(stretch)或收缩,以匹配其内容的长度。这适用于除 iOS 上的任何浏览器之外的所有浏览器,例如 iPhone 和 iPad。
请参阅下面的图像链接,了解它在 iPad 上的表现(上面标记的图像)以及它应该的表现(以及在 Windows 和其他浏览器上)。
有人知道这个问题的修复方法,或者知道为什么这只发生在 iOS 上吗?
&:after {
content: '';
position: absolute;
top: -5px;
left: -10px;
width: 100%;
height: 47px;
z-index: -1;
background-size: 100% 47px;
@include bg-retina('~img/layout/block-subtitle-light-blue', 'png', 158px, 47px);
}
最佳答案
我已经解决了这个问题。
通过媒体查询确定它是否是视网膜显示器。
$retina: 'only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)';
&:after {
content: '';
position: absolute;
top: 5px;
left: 0;
width: 0;
height: 36px;
display: block;
opacity: 0;
z-index: -1;
transition: width ease .4s, opacity ease .4s;
background: url(~img/layout/menu-hover.png) 0 0 / 100% 36px repeat-x;
@media #{$retina} {
background-image: url(~img/layout/menu-hover@2x.png);
}
}
关于html - iOS打破背景大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36182479/