html – 缩小时,重复y背景图像消失/不对齐

发布时间：2020-12-14 23:27:24 所属栏目：资源来源：网络整理

导读：在Firefox上缩小到40％时,图像会消失.直到缩放50％,它很好.然而,在缩放40％时,它只是消失了：在Chrome中,图像仍然可见,但稍有不对齐,这种情况发生在不同的缩放级别：一旦Internet Explorer实际显示预期结果,无论缩放！什么是三叉戟对webkit和gecko采取不

在Firefox上缩小到40％时,图像会消失.直到缩放50％,它很好.然而,在缩放40％时,它只是消失了：

在Chrome中,图像仍然可见,但稍有不对齐,这种情况发生在不同的缩放级别：

一旦Internet Explorer实际显示预期结果,无论缩放！

什么是三叉戟对webkit和gecko采取不同的做法,我该如何修补它？

以下是所有相关代码：

body {
  background-color: rgba(31,59,8,1);
}
#main {
  z-index: 1;
  position: absolute;
  top: 113px;
  left: 50%;
  width: 900px;
  height: 100%;
  margin-top: 160px;
  background-image: url('http://i.stack.imgur.com/zZCB2.png'); 
  background-repeat: repeat-y;
  margin-right: -50%;
  text-align: center;
  transform: translateX(-50%);
}
#main:before {
  content: " ";
  position: absolute;
  left: 0px;
  top: -113px;
  background-image: url('http://i.stack.imgur.com/7DE7i.png');
  background-repeat: no-repeat;
  width: 900px;
  height: 113px;
}
#main:after {
  content: " ";
  position: absolute;
  left: 0px;
  bottom: -200px;
  background-image: url('http://i.stack.imgur.com/DVJAq.png');
  background-repeat: no-repeat;
  width: 900px;
  height: 200px;
}

<div id="main"></div>

解决方法

使你的body.png图像高20像素左右将解决问题. 1px重复图像有时会很奇怪.在加载元素时应该有助于重绘/闪烁.

此外,将“#main：before”设置为顶部-112px而不是-113px时放大Chrome中的时髦线(至少对我而言).

希望有所帮助.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!