在调整页面大小时,我对填充切片图像有疑问。
在普通视图(100%)中,一切看起来都很好,但是当页面调整大小时,有时会出现白色细条,我真的不知道为什么会发生这种情况。只有我想到的是,在网页浏览器缩放页面后,它可能与轮廓分数有关。它发生在Chrome,Firefox,Safari,Edge,IE中,我想也可以在其他浏览器中使用。
这是在Chrome中调整为67%时的外观: click
该示例包含4个切片图像,其中每个图像的变换比例为0.96。
.container > img {
display: block;
}
.container {
position: absolute;
top: 0;
background: #fff;
}
.container-left,
.container-right {
width: calc((100% - 960px) / 2);
height: 100%;
}
.container-left > img,
.container-right > img {
width: 500px;
height: 1125px;
}
.container-left {
left: 0;
}
.container-left > img {
transform: scale(0.96);
transform-origin: top right;
position: absolute;
top: 0;
right: 0;
}
.container-right {
right: 0;
}
.container-right > img {
transform: scale(0.96);
transform-origin: top left;
position: absolute;
top: 0;
left: 0;
}
.container-top,
.container-center {
left: 0;
right: 0;
margin: 0 auto;
}
.container-top {
width: 960px;
height: 120px;
}
.container-top > img {
transform: scale(0.96);
transform-origin: top left;
width: 1000px;
height: 125px;
}
.container-center {
top: 120px;
width: 960px;
}
.container-center > img {
transform: scale(0.96);
transform-origin: top left;
width: 1000px;
height: 1000px;
}
#background {
position: fixed;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
}
#site {
width: 940px;
margin: 0 auto;
background: #eee;
border: 1px solid #000;
margin-top: 800px;
padding: 10px;
}
<div id="background">
<div class="container container-left">
<img src="http://gsroka.com/scale/left.png" />
</div>
<div class="container container-top">
<img src="http://gsroka.com/scale/top.png" />
</div>
<div class="container container-center">
<img src="http://gsroka.com/scale/center.png" />
</div>
<div class="container container-right">
<img src="http://gsroka.com/scale/right.png" />
</div>
</div>
<div id="site">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a
galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets
containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with
the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum
is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived
not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the
leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
答案 0 :(得分:0)
这是因为语句calc((100% - 960px)/2)
导致非整数值,因此浏览器应将其四舍五入为整数(正常数字不浮动数字),因此它将比您预期的小1px。您可以使用calc((100% - 959px)/2)
轻松将效果更改为正常。
您可以轻松使用img
和background-image
,而不是使用background-size: cover;
,这样即使在调整大小时也不会出现问题。