我有一个透明的.png图像,我用css更改背景颜色,所以我可以使用不同颜色的相同图像.
这是一个虚拟图像,问题出在Chrome浏览器上,当你放大某些点并在某些类似的智能手机上时,我会在该图像的顶部和底部找到一条线:
这取决于我认为的页面分辨率.
Firefox无论如何都无法重现此问题.
有没有人见过这样的东西?怎么解决这个问题?
以下是一个示例,尝试使用Chrome放大或使用智能手机打开它:
.vertical-center {
position: relative;
top: 50%;
transform: translateY(-50%);
background-color: black;
background-clip: padding-box;
background-clip: content-box;
}
/* CSS used here will be applied after bootstrap.css */ .equal-col-height { display: flex; display: -webkit-flex; flex-wrap: wrap; }
Heading
更新
整个问题实际上是看到元素边缘的背景颜色,就像这里Fiddle link你可以通过打开智能手机上的链接并尝试放大来重现它.背景颜色来自边缘.
Kosh的解决方案解决了这个问题